列重新排序以引导和/或引导弯曲

Question

目前，我有这样的：

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

移动这导致订单＃1文本＃2的照片，但我想照片是＃1和文本＃2为了。

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

添加两个ID在你的两个div的，你可以使用jquery翻转格但在这里我只使用CSS。希望它会做你的工作。

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