0

I have a web page that contains several components with different heights (based on their own contents) and I need to make a responsive display from left to right, up to down like this:

preview

// display view             // mobile view (expected)  // mobile view (my code)
________________________    ___________                ___________
| elem#1     | elem#2  |    | elem#1  |                | elem#1  |
|            |         |    |         |                |         |
|            |_________|    |         |                |         |
|            | elem#3  |    |         |                |         |
|____________|         |    |_________|                |_________|
| elem#4     |         |    | elem#2  |                | elem#4  |
|            |         |    |         |                |         |
|            |_________|    |_________|                |         |
|            |              | elem#3  |                |         |
|            |              |         |                |         |
|            |              |         |                |         |
|____________|              |         |                |_________|
                            |_________|                | elem#2  |
                            | elem#4  |                |         |
                            |         |                |_________|
                            |         |                | elem#3  |
                            |         |                |         |
                            |         |                |         |
                            |         |                |         |
                            |_________|                |_________|

notice that elem#1 and elem#4's height may be bigger than elem#2 and elem#3.

I managed to make this kind of display using col-md-xx for the desktop view but when the viewport's size is changed, the order is jumbled. my code looks like this:

html

<div class="col-md-9">
  <div class="panel" id="elem1"></div>
  <div class="panel" id="elem2"></div>
</div>
<div class="col-md-3">
  <div class="panel" id="elem2"></div>
  <div class="panel" id="elem3"></div>
</div>

I have a feeling that I need to use flexbox but when I try using the code from w3schools (I know, I know.. I'm sorry, please forgive me) and setting one of the element's height bigger, the other elements on that row becomes taller too..

the code I tried looks like this:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div style="height:150px">5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>
Bill-G
  • 305
  • 4
  • 12
dapidmini
  • 1,490
  • 2
  • 23
  • 46
  • @Paulie_D, I don't think the duplicate is accurate. The OP is not only looking for a masonry layout since he already built it. He's looking for a way to handle the resonsive part and re-order the elements. The duplicate doesn't really deal with responsive. – Temani Afif Aug 04 '19 at 11:06
  • if anyone have this same particular problem, THE solution is use the ```order``` property of flexbox and media query. here's an example: https://jsfiddle.net/rwtb5Lec/ – dapidmini Aug 12 '19 at 08:54

0 Answers0