2016-08-08 3 views
0

Мне сложно понять это. В настоящее время, как вы можете видеть ниже, у меня есть ссылки, которые находятся ниже изображения.Изменение версии настольной версии для разных моделей для мобильных устройств

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

enter image description here

Любая помощь будет оценена.

Благодаря

UPDATE

Ниже приведен HTML страницы. CSS Я использую от начальной загрузки:

<div class="row"> 
 
\t \t \t \t \t <aside class="col-lg-offset-1 col-lg-2 col-md-3 col-sm-3 col-xs-12"> 
 
\t \t \t \t \t \t <span class="editableObject editableComponent" style="display: block; width: 181px; float: none;"><span class="editableObjectContents" style="display: block; width: 181px; float: none;"> 
 
\t \t \t <p><img alt="About Us" height="220" src="/assets/Image/about-us.jpg" width="220"></p></span> 
 
\t \t \t <ul class="editableObjectControl"> 
 
\t \t \t \t <li class="edit"><a href="/admin/?muraAction=cArch.edit&amp;contenthistid=4F3181C1-155D-0201-110389B72699E8CC&amp;siteid=Regal-en-us&amp;contentid=FB628EF2-155D-0201-11F363089D9B2CE8&amp;topid=00000000000000000000000000000000001&amp;type=Component&amp;moduleid=00000000000000000000000000000000003&amp;parentid=00000000000000000000000000000000003&amp;compactDisplay=true&amp;homeID=80EAE971-155D-0201-113C16061274FBBA" data-configurator="false" title="Edit" class="frontEndToolsModal"></a></li> 
 
\t \t \t </ul> 
 
\t \t \t </span><nav id="navStandard" class="mura-nav-standard well"> 
 
\t \t \t <ul class="nav nav-list"> 
 
\t \t 
 
\t \t <li class="first"><a href="/index.cfm/about-us/our-awards/">Our Awards</a></li> 
 
\t \t <li><a href="/index.cfm/about-us/compliance-and-resources/">Compliance and Resources</a></li> 
 
\t \t <li><a href="/index.cfm/about-us/our-contracted-hospitals/">Our Contracted Hospitals</a></li> 
 
\t \t <li><a href="/index.cfm/about-us/our-health-plans/">Our Health Plans</a></li> 
 
\t \t <li><a href="/index.cfm/about-us/our-leaders/">Our Leaders</a></li> 
 
\t \t <li><a href="/index.cfm/about-us/our-mission-and-history/">Our Mission and History</a></li> 
 
\t \t <li class="last"><a href="/index.cfm/about-us/our-organization-and-offices/">Our Organization and Offices</a></li> </ul> </nav> 
 
\t \t \t \t \t </aside><!-- /.span --> 
 
\t \t \t \t \t <section class="col-lg-8 col-md-9 col-sm-9 col-xs-12 content"> 
 
\t \t \t \t \t \t <nav class="hidden-xs"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList" id="crumblist" class="mura-breadcrumb breadcrumb breadcrumb"> 
 
\t \t \t \t \t <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="first"><a itemprop="item" href="/"><span itemprop="name">Home</span></a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="last"><a itemprop="item" href="/index.cfm/about-us/"><span itemprop="name">About Us</span></a><meta itemprop="position" content="1"></li> 
 
\t \t \t \t </ol></nav> 
 
\t \t \t \t \t \t <h1 class="pageTitle"><div class="mura-editable inactive inline"> 
 
\t \t \t \t \t \t <label class="mura-editable-label">TITLE</label> 
 
\t \t \t \t \t \t <div contenteditable="false" id="mura-editable-attribute-title" class="inactive mura-editable-attribute inline" data-attribute="title" data-type="text" data-required="true" data-message="" data-label="title">About Us</div> 
 
\t \t \t \t \t \t </div></h1> 
 
\t \t \t \t \t <div class="mura-editable inactive"> 
 
\t \t \t \t \t \t \t <label class="mura-editable-label">BODY</label> 
 
\t \t \t \t \t \t \t <div contenteditable="false" id="mura-editable-attribute-body" class="inactive mura-editable-attribute" data-attribute="body" data-type="htmlEditor" data-required="false" data-message="" data-label="body"><p>Group has been providing quality, innovative healthcare to&nbsp;Los Angeles, Riverside, San Bernardino, Ventura and Orange Counties&nbsp;for more than 35 years.&nbsp; With the largest physician-owned network in Southern California, more than half a million people and their families have selected us to deliver their healthcare.</p> 
 

 
<p>We have doctors in your community who speak your language and understand your culture. As a result of the high quality of care our doctors provide, we are a 4.5 STAR network as measured by the Centers for Medicare &amp; Medicaid Services.</p> 
 

 
<p>At Regal Medical Group, we take a whole-health approach to help our patients improve physical, mental, and emotional well-being. We do this by offering value-added services like patient focused programs, health education classes, health fairs, and more!</p></div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t </section> 
 
\t \t \t \t </div>

+0

Совместное использование ваших текущих HTML и CSS значительно улучшит ваши шансы получить полезные ответы. –

+0

Также просто телефоны или планшеты тоже? В основном вам нужен медиа-запрос в CSS для изменения макета в зависимости от размера устройства или экрана. –

+0

@PatrickMoore html был загружен –

ответ

0

очень быстро, но не шикарно, способ решить это, чтобы напечатать раздел ссылок в два раза ... один внутри visible-xs, другой внутри hidden-xs ...

<div class="visible-xs">I am the same menu but visible only when extra small devices</div> 
<div class="hidden-xs">I am the same menu but hidden only when extra small devices</div> 

Опубликованная код не ясно, но я предполагаю, что вы используете twitter bootstrap.

+0

Да, я есть, и я бы использовал этот стиль в скрытых xs и просто переупорядочил элементы? –