Две колонки различной позиции

Я хочу сделать что-то не очень сложно, но я не знаю, как это сделать.Две колонки различной позиции

Теперь у меня есть версия для мобильных устройств, как она выглядит сейчас.

Мобильная версия выглядит следующим образом:

А вот это, как я хочу выглядит:

Здесь у меня есть код.

$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++; 
    }

источник

2016-08-08 Red X

Можем ли мы иметь ваш CSS тоже? И рабочая скрипка была бы идеальной для нас, чтобы попробовать что-то, прежде чем дать вам ответ :) – Relisora

Итак, so..class = "find-content" CSS => .find-content {max-height: auto; max-width: 100%; text-align: center;} | class = "image-width" => .image-width {width: 100%;} –

Это возможно с использованием flexbox, но без знания вашего конкретного HTML мы не можем указать, будет ли это применяться в ваших обстоятельствах. Нам понадобится [mcve]. –

-1

Я не верю, что существует простое решение CSS для изменения порядка элементов DOM. Для этого вам нужен Javascript.

Пересмотр моего ответа .. Я бы сделал это, выписав элемент 3 два раза - до и после элемента 2. И затем переключите отображение повторяющихся элементов в зависимости от точки останова. (этот ответ применяется только в том случае, если элементы довольно просты, так как дублирующая разметка меньше желаемого).

(Примечание стороны: я бы очень рекомендую посмотреть в какие-то шаблоны вместо вторя из разметки, как это, Прут, например)

источник

2016-08-08 07:22:02 flemcito

Спасибо за ответ! Что вы думаете об этом ответе? http://stackoverflow.com/questions/1363650/javascript-moving-element-in-the-dom –

Также есть возможность, но не очень. Я думаю, что так, как я бы сделал что-то подобное, дважды записывать третий элемент (до и после элемента 2), а затем переключать видимость повторяющихся элементов в зависимости от того, на какую точку останова вы попали. – flemcito

Я снова скопировал код и я использовал класс начальной загрузки с именем ' видимый '

источник

2016-08-08 11:09:28

Две колонки различной позиции

ответ

Смежные вопросы