除了页眉和页脚之外，我还有4个明显的div组成桌面布局，如下所示：Before broken layout
twitter小部件（它自己的div）是float：right。其他三个div是浮动：左。问题是twitter小部件出现在HTML工作流程的开头（在标题下），所以当我创建Phone媒体查询时，twitter小部件首先在标题下堆叠......这显然是不可取的。我找了一个CSS解决方案，将它推向页脚，无法找到一个不涉及绝对定位的解决方案。我不想伤害网站的响应式设计。
所以我认为我只是将Twitter容器div移动到HTML工作流程的末尾（在页脚之前），这样它将堆叠在Phone查询中的页脚顶部;是的，这解决了Phone Media查询问题;但后来这发生在桌面布局上：After HTML change
我认为我已经完成了所有可能性，即填充，边距，清晰，数学宽度问题（绝对不是这个）问题。使用DW的检查也没有明显的罪魁祸首。
有没有人知道一个CSS解决方案，它将保持完整的桌面布局的完整性;并在Phone查询中，向下推Twitter小部件以绕过其他三个div并叠加在页脚顶部;使用两种HTML结构中的任何一种，或者如果你有第三种，更方便的方法来安排HTML /应用切割器CSS来实现这一目标吗？
在此先感谢帮助人员，这似乎是一件非常愚蠢的事情，非常感谢。
这里是HTML代码和相关的CSS代码：
HTML / CSS代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<! --[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>Inside Juan Pablo</title>
<link href="_css/styles_no_wrapper.css" rel="stylesheet" type="text/css">
<link href="_css/MQuery.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="headercontainer">
<header><h1>Inside Juan Pablo</h1><h2>... A Portal for World Class Reporting</h2>
<h4>
<a href="index.html" title="Home">Home</a> |
<a href="blog/bloghome.html" title="An Accursed Life: A Blog">An Accursed Life: A Blog</a> |
<a href="articles/articlehome.html" title="Mitch Conners Reporting">Mitch Conners Reporting</a></h4>
</header></div>
<div id="welcomediv"><h1>The Newest of the News</h1>
</div>
<div id="twittercontainerindex">
<a class="twitter-timeline" href="https://twitter.com/insidejuanpablo" data-widget-id="558421982627131392">Tweets by @insidejuanpablo</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE lementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.j s";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="blogspotcontainer">
<aside><figure><img src="_images/For Web/croped-thumbs.jpg"></figure></aside>
<article><h1> Blog</h1>
<section>
<h2>Saturday November 29; I believe I'm being haunted</h2>
<h3>by Juan Pablo</h3>
<p>I was minding my own business, working on this website, when what felt like the wrinkled, calloused hands of an hold man, grab me on the shoulder. There is a mirror hanging on the wall just to the left of my workspace; and when I looked it, you won't bellieve what I saw... <a href="#">more</a></p>
</section>
</article>
</div>
<div id="articlecontainer">
<article>
<div id="articleheadingcontainer">
<h1>Breaking Stories</h1>
</div>
<section>
<aside><figure><img src="_images/For Web/The_Femme_Fatale.jpg"></figure></aside>
<h2>Dolphins Storm the Beaches</h2>
<h3>by Juan Pablo</h3>
<P>Dolphins create breathing apparatises and storm Japanese beaches in retaliation...<a href="#">more</a></P>
</section>
<section>
<aside><figure><img src="_images/For Web/sunrise-over-barcelona-3.jpg"></figure></aside>
<h2>An Advacacy for Polluion; it makes for Beautiful Sunsets</h2>
<h3>by Juan Pablo</h3>
<P>The PPM(parts per Million) of carcinogentic particulates might be dangeriously high; but damn, do they make for beautiful sunsets...<a href="#">more</a></P>
</section>
<section>
<aside><figure><img src="_images/For Web/massive-volcano.jpg"></figure></aside>
<h2>The World Quavers with Respect; New Gravy Recipet</h2>
<h3>by Juan Pablo</h3>
<p>At 2:30 PM MT, there was a small foreshock that registered in the Aikian Fault lin in California...<a href="#">more</a></p>
</section>
<section><aside><figure><img src="_images/For Web/ragnarock.jpg"></figure></aside>
<h2>Samsung's new Galaxy 5 achieve sentient conscienceness; Beware of Skynet!</h2>
<h3>by Juan Pablo</h3>
<p> </p>
<p>Usually in the provinece of Kioki Japan, the the large Samsung manufacturing plant, there is a great rabble of congratulations when the first shipment of rolled off the assemblyline and put into planes for world wide distribution; but this time, there was only an ominous silence. Little did they know what had unleashed through out the world, now distrubiting itself throughout the world like a malignent cancer, an unstable apocolypse... <a href="#">more</a></p>
</section>
</article>
</div>
<div id="footercontainer"><footer><h5>Inside Juan Pablo</h5>
<h4><a href="#">Contact</a></h4>
</footer></div>
</div>
</body>
</html>
CSS:
***Desktop**
#welcomediv {
padding: 1% 0% 1% 0%;
position: relative;
width: auto;
background-color: rgba(0,0,0,.7);
max-height: 300px;
min-height: 300px;
max-width: 77%;
min-width: 77%;
float: left;
}
#blogspotcontainer {
float: left;
max-width: 35.5%;
min-width: 35.5%;
padding: 1%;
position: relative;
width: auto;
background-color: rgba(0,0,0,.7);
max-height: 700px;
overflow-y: scroll;
min-height: 700px;
}
#articlecontainer {
float: left;
max-width: 35.5%;
min-width: 35.5%;
padding: 1%;
position: relative;
width: auto;
background-color: rgba(0,0,0,.7);
max-height: 700px;
overflow-y: scroll;
;
min-height: 700px;
}
#twittercontainerindex {
background-color: rgba(0,0,0,.8);
position: relative;
float: right;
min-width: 25%;
max-width: 25%;
padding: 1% 0% 3% 0%;
max-height: 1000px;
min-height: 1000px;
}
***Phone MQ**
#welcomediv {
padding: 1% 0% 1% 0%;
position: relative;
width: auto;
background-color: rgba(0,0,0,1);
max-height: 300px;
overflow-y: scroll;
min-height: 300px;
max-width: 100%;
min-width: 100%;
float: left;
clear: none;
margin-right: 0em;
z-index: 100;
}
#blogspotcontainer {
background-color: rgba(0,0,0,1);
clear: both;
max-width: 98%;
z-index: 100;
padding: 1%;
}
#articlecontainer {
background-color: rgba(0,0,0,1);
clear: both;
max-width: 98%;
padding-top: 1%;
z-index: 100;
min-width: 98%;
}
#twittercontainerindex {
background-color: rgba(0,0,0,.8);
position: relative;
overflow-y: hide;
max-height: 0px;
min-height: 0px;
z-index: -2000;
max-width: 98%;
padding: 1%;
}