html - 两列不同位置

Question

我想做一些不太难的事情，但我不知道该怎么做。

现在我有了移动版现在的样子。

手机版是这样的:

这就是我想要的样子:

我这里有代码。

  $query = "SELECT * FROM my_table";
                    $res = mysqli_query($con, $query);
                    $i = 0;
                    while ($row = mysqli_fetch_assoc($res))             
                   {
                   if($i%2==0)
                   {
                  echo "<div class='row' style='margin-right:0; margin-left:0'>



            <div class='col-md-6' style='padding:0;''>
                <img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' />
                        </div><!--/span-->


                <div class='col-md-6 find-content' style='margin-top:8%;'>
                   <img src='images/my_img/".$row['icon']."'/>
                    <p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p>
                    <p style='width:50%;margin-left:25%;' class='text'>".$row['text']."</p>
                  <a class='a-button'  href='atractions.php?id=".$row['id']."'>Hi</a>            
                </div><!--/span-->
                </div><!--/row -->";
             }
        else
        {
            echo " <div class='row' style='margin-right:0; margin-left:0'>

        <div class='col-md-6 find-content' style='margin-top:10%;'>
         <img src='img/descopera/icons/".$row['icon']."'/>
            <p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p>
            <p style='width:50%;margin-left:25%;' class='text-descopera'>".$row['text']."</p>
          <a class='a-button'  href='atractions.php?id=".$row['id']."'>Hi</a>    
        </div><!--/span-->


         <div class='col-md-6' style='padding:0;'>
              <img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' />
            </div><!--/span-->

        </div><!--/row--> ";
        }   
        $i++;
    }   

Answer 1

我再次复制了代码并使用了名为“visible”的 Bootstrap 类