Как картинку во второй секции поменять местами с текстом?
Как картинку во второй секции поменять местами с текстом?
.content-2 {
flex-direction: column;
display: flex;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.header-cont-text-2 {
max-width: 650px;
margin-right: 10px;
margin-left: 10px;
font-size: 28px;
font-weight: 300;
font-style: normal;
color: #333333;
line-height: 1.2em;
letter-spacing: 0em;
text-align: center;
margin-bottom: 20px;
}
.content-wrap-2 {
display: inline-flex;
}
.item2 {
}
.cont-text2 {
margin-top: 10px;
font-size: 16px;
font-weight: 300;
font-style: normal;
color: #333333;
line-height: 1.37em;
letter-spacing: 0em;
margin-left: 20px;
}
hr{
border: none;
background-color: #e2e2e2;
color: #e2e2e2;
height: 1px;
}
<section class="content-2">
<div class="header-cont-text-2">В Ассортименте большой выбор оригинальных
силиконовых и кожаных чехлов для iPhone</div>
<div class="content-wrap-2">
<div class="item2"><img src="http://51350.lp.tobiz.net/img/470x340/65497671fc1d5bd7d1cf35c553aa60a5.jpg" alt=""></div>
<div class="cont-text2">
<h2>Оригинальные кожанные чехлы для iPhone</h2>
<hr>
<p>Кожаные чехлы для iphone сделаны из кожи европейского производства особой обработки и спроектированны дизайнерами айфона. Они идеально сидят и смотрятся на айфонах. Ваш iPhone в этом чехле будет не только надежно защищен от внешнего воздействия, но и будет выглядеть так же тонко и стильно.</p>
</div>
<hr>
</div>
<div class="content-wrap-2">
<div class="item2"><img src="http://51350.lp.tobiz.net/img/470x340/65497671fc1d5bd7d1cf35c553aa60a5.jpg" alt=""></div>
<div class="cont-text2">
<h2>Оригинальные кожанные чехлы для iPhone</h2>
<hr>
<p>Кожаные чехлы для iphone сделаны из кожи европейского производства особой обработки и спроектированны дизайнерами айфона. Они идеально сидят и смотрятся на айфонах. Ваш iPhone в этом чехле будет не только надежно защищен от внешнего воздействия, но и будет выглядеть так же тонко и стильно.</p>
</div>
</div>
</section>
Ответы (1 шт):
Автор решения: Sevastopol'
→ Ссылка
.content-2 {
flex-direction: column;
display: flex;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.header-cont-text-2 {
max-width: 650px;
margin-right: 10px;
margin-left: 10px;
font-size: 28px;
font-weight: 300;
font-style: normal;
color: #333333;
line-height: 1.2em;
letter-spacing: 0em;
text-align: center;
margin-bottom: 20px;
}
.content-wrap-1 {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
display: flex;
}
.content-wrap-2 {
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
display: flex;
}
.item1 {}
.item2 {}
.cont-text2 {
margin-top: 10px;
font-size: 16px;
font-weight: 300;
font-style: normal;
color: #333333;
line-height: 1.37em;
letter-spacing: 0em;
margin-left: 20px;
}
hr {
border: none;
background-color: #e2e2e2;
color: #e2e2e2;
height: 1px;
}
<section class="content-2">
<div class="header-cont-text-2">В Ассортименте большой выбор оригинальных силиконовых и кожаных чехлов для iPhone</div>
<div class="content-wrap-1">
<div class="item1"><img src="http://51350.lp.tobiz.net/img/470x340/65497671fc1d5bd7d1cf35c553aa60a5.jpg" alt=""></div>
<div class="cont-text1">
<h2>Оригинальные кожанные чехлы для iPhone</h2>
<hr>
<p>Кожаные чехлы для iphone сделаны из кожи европейского производства особой обработки и спроектированны дизайнерами айфона. Они идеально сидят и смотрятся на айфонах. Ваш iPhone в этом чехле будет не только надежно защищен от внешнего воздействия,
но и будет выглядеть так же тонко и стильно.</p>
</div>
<hr>
</div>
<div class="content-wrap-2">
<div class="item2"><img src="http://51350.lp.tobiz.net/img/470x340/65497671fc1d5bd7d1cf35c553aa60a5.jpg" alt=""></div>
<div class="cont-text2">
<h2>Оригинальные кожанные чехлы для iPhone</h2>
<hr>
<p>Кожаные чехлы для iphone сделаны из кожи европейского производства особой обработки и спроектированны дизайнерами айфона. Они идеально сидят и смотрятся на айфонах. Ваш iPhone в этом чехле будет не только надежно защищен от внешнего воздействия,
но и будет выглядеть так же тонко и стильно.</p>
</div>
</div>
</section>