0

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 CSS CODE

* {
    box-sizing: border-box;
  }

   .wrapper {
    display: flex;
    flex-wrap: wrap;
    }

   .wrapper > * {
    padding: 1em;
    background-color: grey;
    border: 1px solid black;
    flex: 0 1 25%;
  }

  @media (max-width: 768px) {
   .wrapper>* {
     flex: 0 1 33.33%;
   }
}
<div class='wrapper'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div class='wrapper'>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

How to combine 2 divs so that they fit together? It currently looks like this:

1 2 3 
4
5 6 7 
8

I want it to be so, with the 2 divs above

1 2 3 
4 5 6
7 8
Rami Assi
  • 910
  • 2
  • 10
  • 19
qwerty
  • 3
  • 3
  • Please put [executable scripts](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) when using Javascript, HTML or CSS. – Book Of Flames May 28 '21 at 07:39

1 Answers1

-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>
meadhu
  • 11
  • 1