How Can I Put Two Rows Side By Side

I have 2 rows of 4 columns each, I want a certain size range to be 3 rows The problem is that in the current code The lines are not connected together, how to solve it? THIS IS THE

Solution 1:

change html structure is the simplest method.

<div class='wrapper'>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
</div>
<style type="text/css">
.wrapper .div{ float: left; width: 33.3%; }
</style>