упорядочение содержимого внутри div

Question

У меня есть такой контент:

<div class="overview cellpadding" id="websitesandportals">
    <div class="container-fluid">
        <div class = "row">
            <div class="col-md-6 even">
                <img src="/assets/images/coustom 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>

Я хочу сначала отобразить контент, а изображение внизу на небольших устройствах и устройствах xs. Но на больших экранах. Как это сделать?

Answer 1

вы можете добавить этот класс flex-sm-row flex-column-reverse в свой <div class = "row">

вы можете использовать flex-sm-row или flex-md-row по вашему выбору

также добавьте класс img-fluid в изображение тег, если вы хотите адаптивное изображение

<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>

Answer 2

Вы можете установить размер столбца xs - xl - md, et c, в этом случае я использую col-lg-12, чтобы использовать 12 столбцов bootstrap grid

Сетка

<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/coustom 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>