Can we reorder elements when they are present inside different parents?

Question

I have a simple section for which I want to re-order the elements in mobile.

In desktop, it looks like this:

I want it to look like this in mobile:

Here is what i have tried so far : JSFiddle live demo

@media only screen and (max-width: 480px) {
  .flex-item1 {
    order: 1;
  }
  .flex-item2 {
    order: 3;
  }
  .flex-item3 {
    order: 2;
  }
}

<section id="main-content">
  <div class="container">
    <div class="row" id="top-content">
      <div class="col-lg-4" id="left-content">

        <h1 class="flex-item1"></h1>
        <div class="card-custom flex-item2">
        </div>

      </div>
      <div class="col-lg-8" id="right-content">
        <div class="flex-item3" canplay id="video-block">
        </div>
      </div>
    </div>
  </div>

</section>

What am I doing wrong?

The order property checks for the parent to have the flexbox model. But in your case the flexbox is set to row class and the order you are trying is not for the direct children. — m4n0, Jul 26 '19 at 18:49
Your structure does not allow that. Child of one div cannot take precedence in order over child of another div. That defeats the whole definition of `div` tag. — Husain Tezabwala, Jul 26 '19 at 18:52
@HusainTezabwala so what do I need to do to get what I want?? — The Dead Man, Jul 26 '19 at 18:55
@ManojKumar Hi, so what do I need to change in my codes to get what I want? — The Dead Man, Jul 26 '19 at 18:57
yeah i see now, always best to also use the bootstrap tag then as well — Steven Kuipers, Jul 26 '19 at 19:21
@zim the guy who made this question a duplicate can you provide the solution to my question using bootstrap?????? , am waiting — The Dead Man, Jul 26 '19 at 20:48

m4n0 · Accepted Answer · 2019-07-26T19:12:06.070

2

You can make use of CSS Grid. I played around with a Grid Generator here. Please use full screen mode to view the output.

Note: If anyone can reduce this code, please do since I just dived into CSS Grid.

JSfiddle Demo

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: 500px;
}

.div1 {
  grid-area: 1 / 1 / 3 / 3;
  background: #00A2E8;
}

.div2 {
  grid-area: 3 / 1 / 5 / 3;
  background: #22b14c;
}

.div3 {
  grid-area: 1 / 3 / 5 / 5;
  background: #ED1C24;
}

@media ( max-width: 600px) {
  .div1 {
    grid-area: 1 / 1 / 2 / 5;
  }
  .div2 {
    grid-area: 4 / 1 / 5 / 5;
  }
  .div3 {
    grid-area: 2 / 1 / 4 / 5;
  }
}


/* Additional styles */

.container>div {
  color: #fff;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

edited Jul 26 '19 at 19:12

answered Jul 26 '19 at 19:08

m4n0

29,823
27
76
89

Nice solution, How about compatibility with cross browsers? – The Dead Man Jul 26 '19 at 19:11
1

Please check this: https://caniuse.com/#feat=css-grid – m4n0 Jul 26 '19 at 19:12
yeah brother I am checking now looking good , – The Dead Man Jul 26 '19 at 19:13
1

Thanks for that grid generator, wow amazing, I will be testing your solution with real data, I will be back for acceptance your answer – The Dead Man Jul 26 '19 at 19:21
Manoj am struggling with grid sytem, here is my real data live demo , can you help me with you code to get this https://meed.audiencevideo.com/ ? – The Dead Man Jul 26 '19 at 20:44
Hey, Can you open a new question? It may lead to endless discussion here. – m4n0 Jul 27 '19 at 05:15

score 1 · Answer 2 · edited Jul 26 '19 at 19:38

Instead of flexbox, I did it with table tag

See if it suits you.

.flex-item1 {
  background: skyblue;
  width;
  150px;
  height: 100px;
}

.flex-item2 {
  width: 150px;
  height: 100px;
  background: green
}

.flex-item3 {
  width: 300px;
  height: 400px;
  background: red;
}

@media only screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  .flex-item1,
  .flex-item2,
  .flex-item3 {
    display: block;
    width: 100%;
  }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<section id="main-content">
  <div class="container">
    <div class="row" id="top-content">
      <table>
        <tr>
          <th class="flex-item1">1</th>
          <th rowspan="2" class="flex-item3">3</th>
        </tr>
        <tr>
          <td class="flex-item2">2</td>
        </tr>
      </table>
    </div>
  </div>

</section>

Good solution if you want to use the table, I prefer grid or bootstrap solution with flexbox, because I have a lot of data will be added inside these columns, thanks for the help though, upvoted for the quick and simple solution — The Dead Man, Jul 26 '19 at 19:18
I was amazed when I myself opted for table over flexbox because it is oldschool. But the Grid based solution shared by Manoj is absolutely on point. That is the correct way to do it. I upvoted his answer myself ;) — Husain Tezabwala, Jul 26 '19 at 19:22
Your right, I spent 3 hrs trying to figure out what the hell is going on :( — The Dead Man, Jul 26 '19 at 19:23

score 0 · Answer 3 · answered Jul 26 '19 at 18:56

use in col-xs-12 for the mobile version.

<section id="main-content">
           `enter code here`<div class="container">
                <div class="row" id="top-content">
                    <div class="col-md-4 col-xs-12" id="left-content">
                        <div class="row col-md-12>
                             <h1 class="flex-item1"></h1>
                        </div>
                        <div class="row col-md-12>
                             <h1 class="flex-item2"></h1>
                        </div>
                    </div>
                    <div class="col-md-8 col-xs-12" id="right-content">
                            <div class="flex-item3" canplay id="video-block">
                            </div>
                    </div>
                </div>
        </div>

</section>

css code:

@media only screen and (max-width: 480px) {
.flex-item1 {
    order: 1; 
   }
.flex-item2{
    order: 3;
}
.flex-item3{ 
  order: 2; 
}
}

Can we reorder elements when they are present inside different parents?

3 Answers3

Linked

Related