0
我一直在设计一个致敬作为freecodecamp项目的一部分。是否可以保持我的页面格式为纵向模式（手机）
我的笔记本电脑的布局是在这里https://codepen.io/9788cl/pen/WExxEK
添加下面的代码片段藏汉。 （刚刚运行的片段和格式化是关闭在藏汉。
我想实现在顶部的中心位置标题，下面是并排图像&报价/生物，图像下面的字体真棒图标。
当我在手机上浏览页面时，布局在风景中是正确的，但是当移动到肖像时，报价&文字在图像下移动，&下面的社交媒体图标看起来相当凌乱。有什么我可以做的吗？
body{ margin:20px;}
.main-title2
{
font-family: 'Orbitron', sans-serif;
font-size:72px;
border-color:#000000;
border-width:4px;
border-style:solid;
border-radius:10px;
margin-bottom:30px;
text-shadow: 1px 1px 3px #000000;
padding-bottom:15px;
}
.paragraph-font
{
font-family: 'Electrolize', sans-serif;
font-size: 18px;
}
.img-rounded
{
border-width:4px;
border-radius:10px;
width:500px;
height:400px;
}
#bio
{
width:600px;
border-width:2px;
border-radius:10px;
margin-left:50px;
}
#quote
{
font-family: 'Dancing Script', cursive;
font-size:24px;
border-width:2px;
border-radius:10px;
margin-top:25px;
}
h3
{
font-family: 'Dancing Script', cursive;
font-size:24px;
border-width:2px;
border-radius:10px;
margin-bottom:10px;
}
#twitter
{
padding-right:140px;
padding-left:140px;
}
.fa-instagram
{
color:#000000
}
.fa-twitter
{
color:#000000
}
.fa-facebook
{
color:#000000
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<link href="https://fonts.googleapis.com/css?family=Revalia" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
</head>
<div class="container-fluid">
<h1 class="main-title2 text-center">Elon Musk Tribute Page</h1>
<div class="row">
<div class="col-xs-5">
<img class="img-responsive img-rounded" src="https://i.ytimg.com/vi/VdjsurFddLQ/maxresdefault.jpg" alt="elon-musk" </img>
</div>
<div id="bio">
<div class="col-xs-7">
<blockquote id ="quote" class="text-center">
" I think that's the single best piece of advice: constantly think about how you could be doing things better and questioning yourself. "</blockquote>
<h3 class="text-center" ><strong>-Elon Musk</strong></h3>
<p class="text-center paragraph-font">Born in South Africa in 1971, Elon Musk became a multimillionaire in his late 20s when he sold his start-up company, Zip2, to a division of Compaq Computers. He achieved more success by founding X.com in 1999, SpaceX in 2002 and Tesla Motors in 2003. Musk made headlines in May 2012, when SpaceX launched a rocket that would send the first commercial vehicle to the International Space Station. He bolstered his portfolio with the purchase of SolarCity in 2016, and cemented his standing as a leader of industry by taking on an advisory role in the early days of President Donald Trump's administration</p>
</div> <!--col-xs-7 -->
</div> <!--id="bio" -->
</div> <!-- row-->
<div id="social-media">
<a href="https://www.instagram.com/elonmusk/?hl=en"><i id="instagram"class="fa fa-instagram fa-5x"></i></a>
<a href="https://twitter.com/elonmusk"> <i id="twitter"class="fa fa-twitter fa-5x"></i></a>
<a href="https://www.facebook.com/Elon-Musk-19958149870/"><i id="facebook"class="fa fa-facebook fa-5x"></i></a>
</div>
</div>
您是否使用了一些框架，以响应布局？ –