Загрузите две колонки справа

css twitter-bootstrap two-columns

588 просмотра

1 ответ

У меня есть следующая проблема, я показываю один элемент за другим для XS и SM, но для MD я хочу показать одно изображение слева и два элемента в правом столбце, я не мог найти способ уместить второй колонка под правой. Вот что я хочу сделать

Mobile (this is working)
----------------------
*Title*
*Description*
*Image*
*Icons*
----------------------

Now for >= MD (Not Working)
----------------------
*Image* | *Title*
        | *Description*
        | *Icons* 
----------------------

Я не смог найти способ уместить описание и иконки под заголовком. Вот мой код:

    <div class="row">
        <div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-6 col-md-push-6">
                <h2>Title</h2>
                <p>Data</p>
        </div>
            <div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-pull-6 col-md-6 col-lg-offset-1 main-tour">
                    <img class="img-responsive center-block" src="https://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg"/>
            </div>
        <div class="main-tour">
            <div class="col-xs-12 col-md-5 col-lg-offset-1 items m-t-3">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
            </div>
        </div>
    </div>

DEMO

Есть идеи, как это можно реализовать?

Автор: Gonzalo Источник Размещён: 08.11.2019 11:06

Ответы (1)


2 плюса

Решение

здесь у вас есть jsfiddle . Используйте медиа-запросы для размеров экрана и применить свой CSS.

@media (min-width:420px) and (max-width:1040px){
  .main-tour{
    float:left;
  }

  .row .first, .row .main-tour{
    display:inline-block;
  }
  .main-tour.description{
    display:block;
    float:none;
  }
}
Автор: Edison Biba Размещён: 20.08.2016 09:18
Вопросы из категории :
32x32