Ordering of contents inside a div

Question

I have a content like this:

<div class="overview cellpadding" id="websitesandportals">
    <div class="container-fluid">
        <div class = "row">
            <div class="col-md-6 even">
                <img src="/assets/images/custom portal.jpg" alt="Image 2" class="img-full img-responsive servicesubpageimage" >
                <div class="empty-space sm-30 xs-30"></div>
            </div>
            <div class="col-md-6 servicesubpagetextcol odd">
                <div class="col-content" >
                    <h1 class=" content-title bighead text-left service-subpage-subheadings">hhghhhhhhhhh</h1>
                    <div class="simple-text text-justify service-subpage-subheadings-content">
                        <p>ghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
                        <a href="contactus.html">
                              <div class="service-subpage-button">
                                    <div class="sim-button button6  stripbutton webdevelopbutton service-subpage-button-div"><span>Get Quote</span></div>
                                 </div>
                        </a>                        
                    </div>
               </div>
          </div>
      </div>
   </div>
</div>

i want to display the content first and image ath the bottom in small devices and xs devices. But in large screens.how to do it?

Does this answer your question? [Switching the order of block elements with CSS](https://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css). [This answer about `flex` on that question should be easy to implement](https://stackoverflow.com/a/25077310/1499877) — WOUNDEDStevenJones, Jun 18 '20 at 04:21
You can use the `order` CSS helper class in Bootstrap: https://getbootstrap.com/docs/4.5/layout/grid/#order-classes — Raptor, Jun 18 '20 at 04:24
You may find https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ will help you. — Mech, Jun 18 '20 at 04:28

score 0 · Answer 1 · edited Jan 25 '21 at 04:54

You can set the col size xs - xl - md, etc, in this case I use col-lg-12, to use the 12 cols of bootstrap grid

Grid System

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="overview cellpadding" id="websitesandportals">
    <div class="container-fluid">
    <div class = "row">
    <div class="col-md-12 col-lg-12 even">
    <img src="/assets/images/custom portal.jpg" alt="Image 2" class="img-full img-responsive servicesubpageimage" >
    <div class="empty-space sm-30 xs-30"></div>
    </div>
    <div class="col-md-12 col-lg-12 servicesubpagetextcol odd">
    <div class="col-content" >
    <h1 class=" content-title bighead text-left service-subpage-subheadings">hhghhhhhhhhh</h1>
    <div class="simple-text text-justify service-subpage-subheadings-content">
 <p>ghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
     <a href="contactus.html">
     <div class="service-subpage-button">
    <div class="sim-button button6  stripbutton webdevelopbutton service-subpage-button-div"><span>Get Quote</span></div>
    </div>
    </a>

    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

Maulik · Answer 2 · 2020-06-18T05:09:27.397

you can add this class flex-sm-row flex-column-reverse in your <div class = "row">

you can use flex-sm-row or flex-md-row as per your choice

also add class img-fluid in image tag if you want to responsive image

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="overview cellpadding" id="websitesandportals">
    <div class="container-fluid">
        <div class = "row flex-md-row flex-column-reverse">
            <div class="col-md-6 even">
                <img src="https://cdn.pixabay.com/photo/2020/05/27/21/46/flowers-5229022_1280.jpg"  alt="Image 2" class="img-fluid servicesubpageimage" >
               
            </div>
            <div class="col-md-6 servicesubpagetextcol odd">
                <div class="col-content" >
                    <h1 class=" content-title bighead text-left service-subpage-subheadings">hhghhhhhhhhh</h1>
                    <div class="simple-text text-justify service-subpage-subheadings-content">
                        <p>ghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
                        <a href="contactus.html">
                              <div class="service-subpage-button">
                                    <div class="sim-button button6  stripbutton webdevelopbutton service-subpage-button-div"><span>Get Quote</span></div>
                                 </div>
                        </a>                        
                    </div>
               </div>
          </div>
      </div>
   </div>
</div>

Ordering of contents inside a div

2 Answers2