Расположение объекта div в зависимости от размера экрана

@Михаил1221 · Регистрация: 28.02.2017

Author24 — интернет-сервис помощи студентам

Подскажите, пожалуйста, возможно ли в html прописать алгоритм, по которому элемент div с текстом внутри, должен располагаться в разных местах в зависимости от размера экрана. А именно, в декстопной и таблетной версии код должен быть таким:

HTML5

<div class="row">
 
            <div class="col-twelve">
                <div style="position: relative;left: 200px;<a class="smoothscroll"  href="#faq" title=""><a class="smoothscroll"  href="#faq" title=""><h1><span style="color: #00BFFF;">Как восстановить<br>зрение за 15 минут</span></h1></a>
                <h2><a class="smoothscroll"  href="#faq" title=""><span style="color: #FFFFFF;">Бесплатный вебинар</span></h2>
                <h2><a class="smoothscroll"  href="#faq" title=""><span style="color: #FFFFFF;">23 марта в 19:00</span></h2>
                <a class="button stroke smoothscroll"href="#faq"style="border-color: orange; title="">Зарегистрироваться</a>
 
            </div>  
            
        </div>

А в мобильной, таким:

HTML5

<div class="row">
 
            <div class="col-twelve">
                <a class="smoothscroll"  href="#faq" title=""><h1><span style="color: #00BFFF;">Как восстановить<br>зрение за 15 минут</span></h1></a>
                <h2><a class="smoothscroll"  href="#faq" title=""><span style="color: #FFFFFF;">Бесплатный вебинар</span></h2>
                <h2><a class="smoothscroll"  href="#faq" title=""><span style="color: #FFFFFF;">23 марта в 19:00</span></h2>
                <a class="button stroke smoothscroll"href="#faq"style="border-color: orange; title="">Зарегистрироваться</a>
 
            </div>  
            
        </div>

Тапками не кидаться. Я понимаю, что это через задницу, но иначе пока не умею

@aj17 · 28.02.2017, 12:04

Если я правильно понял, перед вами задача менять поток элементов на разных резолюциях, css/html такого не умеет. Обратите внимание на javaScript

@Михаил1221 · 28.02.2017, 12:16 **[ТС]**

Спасибо за ответы. Решено перемещением на на 200px, а на 30. (Была проблема с некорректным отображением в мобильной версии)

@Опан · 28.02.2017, 12:27

Javascript

<script>
if(screen.width > 1000 && screen.height > 500){
    document.write("<div>один HTML-код</div>");
}else{
    document.write("<h3>другой HTML-код</h3>");
}
</script>

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	28.02.2017, 12:04	2
	Если я правильно понял, перед вами задача менять поток элементов на разных резолюциях, css/html такого не умеет. Обратите внимание на javaScript 0

@Михаил1221 0 / 0 / 0 Регистрация: 28.02.2017 Сообщений: 2
	28.02.2017, 12:16 [ТС]	3
	Спасибо за ответы. Решено перемещением на на 200px, а на 30. (Была проблема с некорректным отображением в мобильной версии) 0

	28.02.2017, 12:27

Опции темы