Change DIV order to mobile with Bootstrap

Question

In my example, I am using Bootstrap to change the order of DIV between PC and Mobile.

Is there any more elegant (correct) way to do it without having to replicate the DIV code?

<div class="container">    
<!--PC-->
<div class="hidden-xs hidden-sm">
  <p>Is PC</p>
  <div class="row">
    <div class="col-sm-4">A</div>
    <div class="col-sm-4">B</div>
    <div class="col-sm-4">C</div>
  </div>
</div>
<!--Mobile-->
<div class="visible-xs visible-sm">
  <p>Is Mobile</p>
  <div class="row">
    <div class="col-sm-4">C</div>
    <div class="col-sm-4">B</div>
    <div class="col-sm-4">A</div>
  </div>
</div>

Answer 1

Bootstrap 4

Yes, it is possible, if it is bootstrap-4 use flex-direction: row-reverse; in his .row SPECIFIC (apply with a unique ID, apply for all Rows will give problems)

In the example I specified 720px (@media (max-width: 720px)) as limit, but can adjust as desired

@media (max-width: 720px) {
    #este-tem-que-mudar {
        flex-direction: row-reverse;
    }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">    
  <div class="row" id="este-tem-que-mudar">
    <div class="col-sm-4">A</div>
    <div class="col-sm-4">B</div>
    <div class="col-sm-4">C</div>
  </div>
 </div>

The flex-direction should be in the parent element and not in the child elements, so we apply in the . Row, I say this if one day you leave the bootstrap and see that you don’t always need a complete kit/framework for all situations.

The values supported by flex-direction

• row (default value): same text direction, usually from left to right, this works according to the definition of dir and direction, with the values rtl and ltr
• row-reverse: is the opposite of row, if you’re with rtl direction will be left to right and vice versa
• column: The direction in which text lines are stacked
• column-reverse: similar to the column, but inverted

Bootstrap 3

In bootstrap 3 was used float:left in the elements with the class col-*-* and the grid measures were different, can read more in https://getbootstrap.com/docs/3.3/css/#grid-options

So you can apply with col-xs-* if you need any mobile screen to be reversed (depends on your need) and I applied as a measure 768px

The float:right; is that it will reverse the order, but needs to be applied to the CHILDREN instead of the PARENT element, because the fluctuation in the bootstrap3 grids was with float

@media (max-width: 768px) {
    #este-tem-que-mudar > .col-xs-4 {
        float: right;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">    
  <div class="row" id="este-tem-que-mudar">
    <div class="col-xs-4">A</div>
    <div class="col-xs-4">B</div>
    <div class="col-xs-4">C</div>
  </div>
 </div>