print screen of the problemBootstrap 3 добавление контента к "толкнул" ДИВ перемещает другие элементы
Order of the divs in different screen sizes
Здравствуйте. У меня была такая ситуация, как на картинке. Мне нужно переупорядочить 3 элемента div с помощью бутстрапа в определенных местах для разных размеров экрана. На мобильном устройстве они должны быть друг на друга (по умолчанию) - это нормально. Проблема возникает для планшетов и экранов для ноутбуков. Для планшетов и экранов ноутбуков второй div необходимо разместить слева. Поэтому я использую классы .col-sm-6 и .col-sm-pull-6, а для первого и третьего divs .col-sm-6 push-6. Когда нет содержимого в divs, все в порядке, но когда я добавляю какой-то текст, левый div пушшет другой. Как можно добиться плавного добавления текста, не перемещая вправо div.
Для большого экрана div 1 добавлен скрытый класс, поэтому 2 и 3 становятся равными по высоте, поэтому проблем нет. Проблема возникает только для небольших и средних экранов. Спасибо заранее.
Вот код также:
/* ============================= \t \t
Base Element Styles
============================== */
* {
\t box-sizing: border-box;
}
body {
\t font-family: sans-serif;
\t line-height: 1.6;
\t color: #fff;
\t text-align: center;
\t padding-top: 55px;
}
/*===============================
\t \t Base Layout Styles
===============================*/
.navbar {
\t margin-bottom: 0;
}
/* Headline */
.headline {
\t margin-top: 20px;
\t margin-bottom: 20px;
}
p {
\t margin: 0;
}
.headline-right-top {
\t height: 100px;
\t background: rgba(0,0,0, 0.8);
}
.headline-left{
\t background: rgba(0,0,0, 0.3);
}
.headline-right-bottom {
\t background: rgba(0,0,51, 0.6);
}
/*===============================
\t \t Media Queries
===============================rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width, initial-scale = 1.0">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" media="screen">
<title>Newsfeed</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
Login bar
</div> <!-- /.login-bar -->
<div class="headline">
<div class="container">
<div class="row">
<div class="headline-right-top col-sm-6 col-sm-push-6 hidden-lg">
<div class="headline-see-all-news">
All News
</div>
<div class="banner-region-two">
Banner
</div>
</div>
<div class="headline-left col-sm-6 col-sm-pull-6 col-lg-pull-0">
<div class="headline-latest">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis culpa, ducimus molestiae velit veritatis beatae necessitatibus! Eius nihil quidem odio enim eum, eaque quis amet repellendus officiis magni impedit nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis culpa, ducimus molestiae velit veritatis beatae necessitatibus! Eius nihil quidem odio enim eum, eaque quis amet repellendus officiis magni impedit nesciunt.</p>
</div>
</div>
<div class="headline-right-bottom col-sm-6 col-sm-push-6 col-lg-push-0">
<div class="headline-oppinions">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis culpa, ducimus molestiae velit veritatis beatae necessitatibus! Eius nihil quidem odio enim eum, eaque quis amet repellendus officiis magni impedit nesciunt.</p>
</div>
</div>
</div> <!-- /.row -->
</div> <!-- /.container -->
</div> <!-- /.headline -->
</body>
</html>