Réorganiser Colonnes avec Bootstrap et/ou Bootstrap flex

Question

i ont actuellement ceci:

   <div class="row"> 
        <div class="col-md-6"> 
         <p>A long borring text</p> 
        </div> 

        <div class="col-md-6"> 
         <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" /> 
        </div>    
       </div> 

sur mobile ce résultat pour # 1 texte # 2, mais je veux que la photo soit # 1 et le texte # 2 en ordre.

Answer 1

HTML

<div class="row flex reverse-column"> 
    <div class="col-md-6"> 
     <p>A long borring text</p> 
    </div> 

    <div class="col-md-6"> 
     <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" /> 
    </div>    
</div> 

CSS

@media(max-width: 767px){ 

    .flex{ 
     display: flex; 
    } 
    .flex.reverse-column{ 
     flex-direction: column-reverse; 
    } 
    } 

Answer 2

Ajoutez deux id dans vos deux div et vous pouvez retourner div en utilisant jquery, mais ici je suis en utilisant uniquement css. J'espère que cela fera votre travail.

<style> 
    /* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

.row { display: table; } 
#first { display: table-footer-group; } 
#second { display: table-header-group; } 
} 

</style> 
       <div class="row" > 
        <div class="col-md-6" id ="first"> 
         <p>A long borring text</p> 
        </div> 

        <div class="col-md-6" id="second"> 
         <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" /> 
        </div>    
       </div>