Bootstrap чередующийся макет для мобильного телефона

Question

У меня есть базовый адаптивный макет в Bootstrap, где изображение находится рядом с блоком текста. В первом ряду изображение слева, во втором ряду изображение справа. Это повторяется вниз по странице.

Проблема: когда пользователь находится на мобильном устройстве, изображения становятся на всю ширину (как они должны), однако для любой строки с изображением, выровненным по правому краю, оно располагается ниже текста, а не выше (см. Код ниже). Я понимаю, почему это происходит, но мне интересно, есть ли класс в начальной загрузке, который может исправить это? Это должно быть довольно распространенным, так какова рекомендуемая здесь лучшая практика?

<div class="container">
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive"/>
          </div>
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>      
    </div>
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive" />
          </div>      
    </div>
</div>

Любая помощь будет оценена.

Answer 1

Вы ищете что-то вроде вложенных столбцов: вот документация: http://getbootstrap.com/css/

Bootply: http://www.bootply.com/qsdH9jr70F

Посмотрите этот код: и особенно на col-sm-push-6 а также col-sm-pull-6

HTML:

<div class="container">
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive">
          </div>
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>      
    </div>
    <div class="row feature">      
          <div class="col-sm-push-6 col-sm-6 col-md-6">   <!--   HERE   -->
            <img src="url" class="img-responsive">
          </div>   
          <div class="col-sm-6 col-sm-pull-6 col-md-6">   <!--   HERE   -->
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>   
    </div>
</div>