0

I'm trying to change the order of columns on sm resolutions/devices in Bootstrap 4.1 but unfortunately nothing is happening. I'm using order prefix for Bootstrap 4.1. My html code looks like this. Can somebody help?

<div class="container-fluid office-spaces">
  <div class="col-md-12 col-xs-12 first-layout">
       <div class="col-md-6 order-2 order-md-1">
            <div class="office-spaces-slider"> 
                 <div class="img-wrapper">
                     <img class="img-responsive" src="theme/images/interior2.jpg" alt="interior2">
                    </div>
                </div>
            </div>
            <div class="col-md-4 order-1 order-md-2">
                <div class="col-md-6 col-xs-12">
                    <hr>
                    <h3>OFFICE SPACES</h3>
                </div>
                <div class="col-md-6 col-xs-12">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis nibh
                        nibh, quis vehicula neque suscipit at. Sed dictum, sapien ut sagittis posuere,
                        massa metus vulputate lorem, ac egestas erat ante et lorem. Aenean facilisis
                        tincidunt lectus, tristique egestas erat fermentum nec. Vivamus vestibulum
                        metus et dui posuere convallis. 
                    </p>
                </div>
            </div>
            <div class="col-md-2 empty order-3 order-sm-3"></div>
        </div>
    </div>
Ivana
  • 842
  • 2
  • 15
  • 33
  • Probably your col div must be children of a row. See this [question](https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4) – Sfili_81 Sep 13 '19 at 08:00
  • Possible duplicate of [Order columns through Bootstrap4](https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4) – Sfili_81 Sep 13 '19 at 08:13

1 Answers1

-1

In bootstrap 4, the column formats are as follows:

  • col-* --> mobile portrait mode

  • col-sm-* --> mobile landscape mode

  • col-md-* --> ipad portrait mode

  • col-lg-* --> ipad landscape mode

  • col-xl-* --> laptop mode,desktop modes

So you should use below format to be responsive in all devices:

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
</div>

and also always put the .row class after the .container class line:

<div class="row">
 //ur column classes goes here
</div>
RobC
  • 22,977
  • 20
  • 73
  • 80
umesh shirayath
  • 1
  • 2
  • ya ! so pls use row .class always immediately after .container class and split your .col classes as you want to show. – umesh shirayath Sep 13 '19 at 08:08
  • I think you have to provide a solution using her code – Sfili_81 Sep 13 '19 at 08:09
  • I don't need here a .container, I only use .container-fluid because of my layout. Because of that i don't need a .row. – Ivana Sep 13 '19 at 08:10
  • row is a flex element and col is flex-child element so order class can work only if col is a child element – Sfili_81 Sep 13 '19 at 08:12
  • order class wont work if u use .col class inside .col , either u hv to remove extra column line or need to include .row, .row class by default having margin-right and margin-left properties..u cn make it 0 since u r using .container-fluid. – umesh shirayath Sep 13 '19 at 08:19
  • @Sfili_81 do I need above .row .container class? – Ivana Sep 13 '19 at 09:14