Форум PHP программистов > мобильная верстка bootstrap

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: мобильная верстка bootstrap

savelikan

11.04.2017 - 19:55

Привет всем) Подскажите, как в мобильной версии сделать так, чтобы блоки стали как на изображении? Тоесть сменить порядок блоков по вертикали

<div class="row">
    <div class="col-sm-2 col-md-1">
        <a class="btn btn-default" href="button" style=margin-top:20px;"">БЛОК 1</a>
    </div> 
    <div class="col-sm-7 col-md-8">
        <h1 class="text-center">Текст</h1>
    </div> 
    <div class="col-sm-3 col-md-3">Блок 2
    </div> 
</div>

_____________
Одесса - мой город!)))

sergeiss

11.04.2017 - 22:24

Что-то мне кажется, что чистым CSS тут не получится... Я бы использовал JS и перемещал средний блок в другого "родителя" при размерах, соответствующих мобильной верстке.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

Guest

12.04.2017 - 01:01

http://getbootstrap.com/css/#grid-column-ordering

VeRTak

12.04.2017 - 04:14

Цитата (sergeiss @ 11.04.2017 - 22:24)

Что-то мне кажется, что чистым CSS тут не получится...

Получится. Два блока, один показываем при мобильной, другой свыше там 480px или сколько ТС нужно. При желание можно даже все в одном реализовать, через grid

AllesKlar

12.04.2017 - 10:51

Цитата (sergeiss @ 11.04.2017 - 20:24)

Что-то мне кажется, что чистым CSS тут не получится..

Это же стандарный принцип адаптивной верстки.
Хошь, бутсрапом, хошь нативно через @media screen and (min-width: 480px) etc.

_____________
[продано копирайтерам]

sergeiss

12.04.2017 - 11:20

Цитата (AllesKlar @ 12.04.2017 - 10:51)

Это же стандарный принцип адаптивной верстки.
...хошь нативно...

Покажи, плз, как поменять этот порядок ДИВов

Мне тоже интересно.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

VeRTak

12.04.2017 - 11:31

Цитата (sergeiss @ 12.04.2017 - 11:20)

Покажи, плз, как поменять этот порядок ДИВов Мне тоже интересно.


<div class="a">
    <div class="b middle-block">1</div>
    <div class="b top-block">2</div>
    <div class="b bottom-block">3</div>
</div>


.a {
    border: 3px solid grey;
    padding: 5px;
    display: table; 
    width: 100%;
    border-collapse:separate;
    border-spacing:5px;
}
.b {
    background: #99CCFF;
   }
.middle-block {
 display: table-row-group;   
}
.bottom-block {
 display: table-footer-group; 
 }
.top-block {
 display: table-header-group;   
}

Так же можно реализовать через бустрап, как я понял ТС им пользуется, с этим участием http://getbootstrap.com/css/#responsive-utilities-classes

Делаем два блока, в одном то что нужно для полного экрана, а другой для мобильного, и по случаю один прячем другой показываем, и наоборот

sergeiss

12.04.2017 - 20:41

Цитата (VeRTak @ 12.04.2017 - 11:31)

Делаем два блока, в одном то что нужно для полного экрана, а другой для мобильного, и по случаю один прячем другой показываем, и наоборот

Но это другая задача, хотя визуально и будет похоже на озвученную. А если у блоков сложная разметка, то будешь в обоих сразу что-то менять, когда понадобится что-то подрихтовать? "Индусский" подход тут не верен

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

AllesKlar

13.04.2017 - 01:43

Цитата (sergeiss @ 12.04.2017 - 09:20)

Покажи, плз, как поменять этот порядок ДИВов

Я, вообще-то не верстальщик.. я вообще на Java пишу

Но, как-то вроде так https://jsfiddle.net/nhq10auf/1/
Ну, если надо вот прям вообще по-научному, могу у нашего гуру по Гуям спросить

_____________
[продано копирайтерам]

VeRTak

13.04.2017 - 06:51

sergeiss Да это просто как один из вариантов, можно через flex, хотел донести то, что можно и на css реализовать

walerus

13.04.2017 - 10:29

Все проще.

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
        <meta charset="UTF-8" />
        <title>Asd</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=0.7, user-scalable=no' name='viewport'>
        <meta name="description" content="ASD">
		<meta name="keywords" content="ASD">
		
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

		<!-- Optional theme -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

		<!-- Latest compiled and minified JavaScript -->
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
		</head>
<body>
<div class="container">
	<header >
		<div class="row">
			<div class="col-xs-12 col-sm-4 col-md-push-4" style="background-color: #FF9800;">BLOCK 2</div>
			<div class="col-xs-6 col-sm-4 col-md-pull-4" style="background-color: #009688;">BLOCK 1</div>
			<div class="col-xs-6 col-sm-4 " style="background-color: #E91E63;">BLOCK 3</div>
		</div>
	</header >
</div>

Результат:

Быстрый ответ:

Здесь расположена полная версия этой страницы.