Я пытаюсь создать вложенные столбцы, используя bootstrap3. Логически все настроено хорошо, но я вижу, что правила для определенного размера перезаписывают другой размер, например, я применяю некоторые правила, когда размер экрана средний, но это влияет на большой размер, также текст появляется сверху изображений, я не знаю, в чем проблема.
Другой вопрос, есть ли способ автоматически изменить размер (масштабировать) изображения?
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 1</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>
<script src="js/jquery-3.4.0.min.js"></script>
<style type="text/css">
body{ text-align: center; }
img{ height:150px; width: 150px; margin: 0 auto; display: block; }
@media (min-width: 768px) and (max-width: 991px){
div{text-align: left;}
h1{margin-top: 0;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<section class="col-lg-2 col-md-4 col-sm-12 col-xs-6 col-xs- offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/4.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
<div class="clearfix visible-sm-block"></div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/1.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor
</p>
</div>
</div>
</section>
<div class="clearfix visible-sm-block"></div><!-- as the elements have been broken at some break points-->
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/2.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/3.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/1.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/2.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
результат должен быть следующим:
- 6 колонок на большом экране
- колонки полной ширины на маленьком экране
- 3 колонки на среднем экране