0

есть одна задача, при мобильной версии (при ширине 568px) объект <div class="item-two"><a href="">Переход на другую страницы</a></div> нужно переместить вниз

введите сюда описание изображения

Как можно поправить данный код или при помощи css переместить вниз ссылку?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">
  <div class="container__caption d-flex align-items-center">
    <div class="item-one"><h1>Заголовок</h1></div>  
    <div class="item-two"><a href="">Переход на другую страницы</a></div>
  </div>
  <div class="row">
    <div class="col-4"><div class="item">текст</div></div>
    <div class="col-8"><div class="item">текст</div></div>
  </div>
</div>

2

1 ответ 1

0

Одно из решений такое:

.next-page_m {
    display: none;
}
.next-page_d {
    display: block;
}
@media screen and (max-width: 568px) {
.next-page_m {
    display: block;
}
.next-page_d {
    display: none;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">
  <div class="container__caption d-flex align-items-center">
    <div class="item-one"><h1>Заголовок</h1></div>  
    <div class="item-two next-page_d"><a href="">Переход на другую страницы</a></div>
  </div>
  <div class="row">
    <div class="col-4"><div class="item">текст</div></div>
    <div class="col-8"><div class="item">текст</div></div>
  </div>
  <div class="item-two next-page_m"><a href="">Переход на другую страницы</a></div>
</div>

2
  • Решение хорошее, но нужно чтобы была одна ссылка. Сделал изначально так как вы, но не подошло 27 июн 2020 в 13:48
  • почему не подошло? ок, тогда jq/js написать можно. только этот вариант намного лучше. 27 июн 2020 в 14:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.