我是HTML和CSS的新手，我试图格式化我的代码结果，以便页面是响应的，它看起来在移动和另一种方式在桌面上更好的可读性.我已经做了看W3.School教程，我有一个导航栏在旁边，而主文本被分成两个栏设置为flex.我想做的是，当屏幕较小的时候，两个列显示在彼此下面.
以下是指向Codesen的链接，以查看我到目前为止所做的工作:codepen
header {
background-color: mediumpurple;
padding: 30px;
text-align: center;
}
h1 {
color: #000000;
text-align: center;
font-family: times new roman;
font-size: 30px;
}
h2 {
color: #000000;
text-align: center;
font-family: times new roman;
}
p {
font-family: times new roman;
font-size: 18px;
color
}
p.ex1 {
font-family: times new roman;
font-size: 18px;
margin-bottom: 60px;
}
p.ex2 {
font-family: times new roman;
font-size: 18px;
text-align: center;
}
p.ex3 {
margin-top: 60px;
margin-bottom: 60px;
text-align: center;
}
p.indented-paragraph {
font-family: times new roman;
font-size: 18px;
text-indent: 20px;
margin-bottom: -15px;
margin-left: 20%;
}
img {
max-width: 100%;
height: auto;
}
div.container {
overflow: hidden;
}
div.left {
float: left;
}
div.right {
float: right;
}
div.columns {
display: flex;
margin-bottom: 100px;
}
div.columns>div {
width: 50%;
}
section {
display: -webkit-flex;
display: flex;
}
a:link {
color: darkslateblue;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: mediumorchid;
background-color: transparent;
text-decoration: underline;
}
nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: lavender;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
text-align: center;
}
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: snow;
padding: 10px;
}
@media only screen and (max-width: 620px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
/* For mobile phones: */
.container .div.columns .section .nav .article .ul {
width: 100%;
}<body>
<header>
<div class="container">
<div class="left">
<h3>Patented Dec. 28, 1943</h3>
</div>
<div class="right">
<h3>2,337,621</h3>
</div>
</div>
<h2><b>UNITED STATES PATENT OFFICE</b></h2>
<h3 style="text-align: center;">
2,337,621
</h3>
<h1><b>TIMING DEVICE FOR SCRIPT READING</b></h1>
<p style="text-align: center;" class="ex1">
William S. Peevey, Oakland, Calif.
<br> Application March 20, 1941, Serial No. 384,357
<br> 2 Claims. (CL 40—31)
</p>
</header>
<section>
<nav>
<ul>
<li>
<h2><b>Contents</b></h2>
</li>
<br>
<p class="ex2">
<li><a href="#Page-1">Page 1</a></li>
</p>
<p class="ex2">
<li><a href="#Page-2">Page 2</a></li>
</p>
<p class="ex2">
<li><a href="#Page-3">Page 3</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-1">Figure 1</a></li>
</p>
<p class="ex2">
<li> <a href="#Figure-2">Figure 2</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-3">Figure 3</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-4">Figure 4</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-5">Figure 5</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-6">Figure 6</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-7">Figure 7</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-8">Figure 8</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-9">Figure 9</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-10">Figure 10</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-11">Figure 11</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-12">Figure 12</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-13">Figure 13</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-14">Figure 14</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-15">Figure 15</a></li>
</p>
</ul>
</nav>
<article>
<h2 id="Page-1" style="margin-bottom: 60px;">Page 1</h2>
<div class="columns">
<div>
<p class="indented-paragraph">This invention relates to a new and useful im-
<br> proved script reading timing device that is adapt-
<br> ed for use in radio broadcasting and all other
<br> types of scrip reading.</p>
<p class="indented-paragraph">It is an object of the present invention to pro-
<br> vide a specially constructed device of the charac-
<br> ter described that can be made miniature in size
<br> and operated and controlled in an exceptionally
<br> simple manner.</p>
<p class="indented-paragraph">It is another object of the invention to provide
<br> two spools for carrying script tape and means
<br> for automatically conveying the tape from one
<br> spool to the other and past a time indicator.</p>
<p class="indented-paragraph">It is another object of the invention to control
<br> the conveying of said tape by the combination
<br> of an electric motor and a mechanical motor.</p>
<p class="indented-paragraph">It is another object of the invention to provide
<br> means for producing a continuous pulling tension
<br> on the tape while it is being unwound from the
<br> primary spool.</p>
<p class="indented-paragraph">Another object of the invention is to provide
<br> means for conveying the tape past a time indi-
<br> cator at a constant unchanging speed and to also
<br> provide means for enabling the speed to be
<br> changed if desired.</p>
<p class="indented-paragraph">Another object of the invention is to provide
<br> improved means for controlling the device in a
<br> manner that will enable the reading to be re-
<br> hearsed.
</p>
<p class="indented-paragraph">The invention further consists in the particu-
<br> lar combination, construction and association of
<br> the different parts, such as described in the fol-
<br> lowing specification, and possesses various other
<br> objects and features of advantage which will be
<br> apparent during the course of the following
<br> description.
</p>
<p class="indented-paragraph">In the accompanying drawings forming a part
<br> of this specification and in which like numerals
<br> are employed to designate like parts throughout
<br> the same,</p>
<p class="indented-paragraph"><a href="Figure%201.png" target="_blank">Fig. 1</a> is a top plan view of the device and par-
<br> ticularly shows two elongated cylindrical hous-
<br> ings, one a primary housing from which the tape
<br> is drawn, and the other a secondary housing into
<br> which the tape is conveyed;</p>
<p class="indented-paragraph"><a href="Figure%202.png" target="_blank">Fig. 2</a> is an outer end view of a cap that fits on
<br> the left end of the secondary housing;</p>
<p class="indented-paragraph"><a href="Figure%203.png" target="_blank">Fig. 3</a> is a central vertical sectional view of said
<br> cap and a mechanical motor that is mounted
<br> therein;
</p>
<p class="indented-paragraph"><a href="Figure%204.png" target="_blank">Fig. 4</a> is a sectional view taken on the line
<b>4—4</b>
<br> of Fig. 3, looking in the direction of the arrows,
<br> and shows a coiled spring and the preferred con-
<br> struction of the mechanical motor;</p>
<p class="indented-paragraph"><a href="Figure%205.png" target="_blank">Fig. 5</a> is a longitudinal side elevational view of
<br> the primary housing with a portion of the hous-
<br> ing wall broken away to show a specially con-
<br> structed spool for carrying the tape and one of
<br> the rollers that is provided for controlling the
<br> tape;
</p>
</div>
<div>
<p class="indented-paragraph"><a href="Figure%206.png" target="_blank">Fig. 6</a> is a view showing the manner in which
<br> an idler roller is mounted in the secondary hous-
<br> ing;
</p>
<p class="indented-paragraph"><a href="Figure%207.png" target="_blank">Fig. 7</a> is a fragmentary end sectional view taken
<br> on the line <b>7—7</b> of <a href="Figure%201.png" target="_blank">Fig. 1</a>, looking in the direction
<br> of the arrows, illustrating the manner in which
<br> the tape travels from the primary housing to the
<br> secondary housing and past the reading point of
<br> time, and showing in elevation the lids that are
<br> hinged to the lower right ends of said housings;</p>
<p class="indented-paragraph"><a href="Figure%208.png" target="_blank">Fig. 8</a> is an inside plan view of a cap that is
<br> mounted on the left end of the primary housing,
<br> said cap containing the electric motor and reduc-
<br> ing gears for imparting revolvable movement to
<br> the spool in said housing;</p>
<p class="indented-paragraph"><a href="Figure%209.png" target="_blank">Fig. 9</a> is a central longitudinal enlarged broken
<br> sectional view of the primary housing, spool
<br> therein, and spool winder in the right end there-
<br> of, showing in elevation the electric motor and
<br> reducing gears in the left end thereof;</p>
<p class="indented-paragraph"><a href="Figure%2010.png" target="_blank">Fig. 10</a> is a vertical sectional view taken on
<br> the line <b>10—10</b> of <a href="Figure%209.png" target="_blank">Fig. 9</a>, looking in the direction
<br> of the arrows;</p>
<p class="indented-paragraph"><a href="Figure%2011.png" target="_blank">Fig. 11</a> is a vertical sectional view taken on the
<br>
<b>line 11—11</b> of <a href="Figure%209.png" target="_blank">Fig. 9</a>, looking in the direction of
<br> the arrows;</p>
<p class="indented-paragraph"><a href="Figure%2012.png" target="_blank">Fig. 12</a> is a longitudinal view of the driven roll-
<br> er shaft and illustrates the manner in which the
<br> same is revolubly supported in the prmary hous-
<br> ing and provided with a pinion that is capable of
<br> engaging with the gears driven by the electric
<br> motor;
</p>
<p class="indented-paragraph"><a href="Figure%2013.png" target="_blank">Fig. 13</a> is a longitudinal side elevational view
<br> of the adjustable shaft and illustrates the man-
<br> ner in which the same is revolubly supported on
<br> a pair of adjusting levers that are mounted in
<br> the primary housing;</p>
<p class="indented-paragraph"><a href="Figure%2014.png" target="_blank">Fig. 14</a> is a top plan view of said adjustable
<br> shaft and levers and illustrates the manner in
<br> which the levers are connected together; and</p>
<p class="indented-paragraph"><a href="Figure%2015.png" target="_blank">Fig. 15</a> is a diagrammatic view, illustrating a
<br> plurality of the script timing devices and the con-
<br> trols for separately operating the same.</p>
<p class="indented-paragraph">In the accompanying drawings wherein for
<br> the purpose of illustration is shown a preferred
<br> embodiment of my invention, the numeral <b>17</b>
<br> designates the primary housing and the numeral
<br>
<b>18</b> the secondary housing, both of which are
<br> preferably made of sheet metal and cylindrically
<br> formed and provided with slots <b>19</b> and <b>20</b>, re-
<br> spectively, through the cylindrical walls thereof,
<br> as shown in Figs. <a href="Figure%201.png" target="_blank">1</a> and <a href="Figure%207.png" target="_blank">7</a>. Covers
<b>21</b> and <b>22</b>
<br> are hinged, respectively, to the right ends of said
<br> housings <b>17</b> and <b>18</b> by suitable hinges <b>23</b> and <b>24</b>,
<br> respectively, and an intermediate member or
<br> handle <b>25</b> is provided for holding the housings
<br> together, as shown in Figs. <a href="Figure%201.png" target="_blank">1</a> and <a href="Figure%207.png" target="_blank">7</a>. A pair of
<br> suitable guides <b>26</b> and <b>27</b> extends over both of
<br> said housings for carrying the tape from one
<br> housing to the other and are fastened to the cyl-</p>
</div>
</div>
<hr style="height:2px;border-
width:0;width:50%;color:lightblue;background-color:lightblue">如果有人设法弄清楚如何使列布局响应，我将非常感激，因为我只设法使导航条移动的基础上屏幕大小.
我try 使用响应式网页设计框架W3.CSS，如https://www.w3schools.com/html/html_responsive.asp所示，但它没有工作.我可能在使用代码时犯了错误.