How to change order of elements when device is mobile

Question

I have sth like this

<div className="Image"><div><div className="Text"><div>
<div className="Text"><div><div className="Image"><div>
<div className="Image"><div><div className="Text"><div>

How to swap content between my divs when device is mobile??

Is any trick for it? Or should i write a code again for mobile? I use bootstrap and flex box.

Swap how? If it's a simple reversal of the order then flexbox will do nicely. Otherwise, you might find grid-template-areas to do the job well. — kelsny, May 23 '22 at 14:12
Are you trying to re-order them in the DOM, or is what you really want just to reorder them visually? JS is required for the first option, but CSS can (and should) be used if the goal is to create a mobile friendly layout. — DBS, May 23 '22 at 14:12
the order which is in my comment is ok big for screens but when i go to mobile i have mess like image text image image text. This is becouse i have all elements vertically — SimonZ89, May 23 '22 at 14:15
that's called building a responsive design. there's many ways to do that — Daniel A. White, May 23 '22 at 14:19
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, May 23 '22 at 14:21
my i idea is to find size of the window and then swap content according to className using js — SimonZ89, May 23 '22 at 14:21
Do you want it on mobile to be: Image Text Image Text Image Text? — disinfor, May 23 '22 at 14:23

score 2 · Accepted Answer · answered May 23 '22 at 14:22

Using Flexbox, you can use order.

.container{
  display:flex;
}
.order-1{
  order:1;
}
.order-2{
  order:2;
}
.order-3{
  order:3;
}
@media(min-width:992px){
  .order-lg-1{
    order:1;
  }
  .order-lg-2{
    order:2;
  }
  .order-lg-3{
    order:3;
  }
}

<div class="container">
  <div class="order-3 order-lg-2">A</div>
  <div class="order-2 order-lg-1">B</div>
  <div class="order-1 order-lg-3">C</div>   
</div>

score 0 · Answer 2 · edited May 23 '22 at 14:34

div is originally display: block. You may have to put an outside div to envelop the three divs you have and apply display: flex.

div{
  display: flex;
  flex-wrap: wrap;
}

<div class="container">
  <div className="Image">image<div>           
  <div className="Text">text<div>            
  <div className="Image">image<div>            
</div>

When you reduce the screen size, the elements will be displayed in columns.

How to change order of elements when device is mobile

2 Answers2

Linked