如何在HTML中左右对齐，以便当屏幕变窄时，一个元素的一部分在另一个元素下滑动？

Question

目前我的两个专栏如下。当屏幕宽度超过900px时，它们可以正常工作。

当屏幕缩小到大约800px时，如何允许第3列中的底部元素在第2列中的元素下滑动，以便保留图形概念？我使用的是纯HTML和CSS的解决方案，没有JS，给出类似这样的东西：

#col3 {
  float: left;
  width: 60px;
}

#col4 {
  font-size: 80%;
  display: inline;
  float: right;
  text-align: right;
  text-decoration: none;
  padding: 0 20px 0 0;
}

.col4-mitem {
  text-align: center;
  text-decoration: none;
  padding-left: 20px;
  font-size: 80%;
}

.col4-mitem a:link,
a:visited {
  color: #000;
  text-decoration: none;
  border-bottom: 0;
}

.col4-mitem a:hover,
a:active {
  color: #f00;
}

#stext-input {
  border: solid 1px;
  border-right: none;
  font-size: 80%;
  float: left;
  height: 14px;
  padding-left: 5px;
  width: 180px;
}

<div id="col3">
  <select class="select-box" id="form">
		<option value="">Browse past issues</option>
		<option value="http://foobar.com/1.html">Issue 7</option>
		<option value="http://foobar.com/2.html">Issue 8</option>
		<option value="http://foobar.com/3.html">Issue 9</option>
		<option value="http://foobar.com/4.html">Issue 10</option>
		</select>
</div>
<!--close col3-->
<div id="col4">
  <span class="col4-item"><a href="#1">link 1</a></span>
  <span class="col4-item"><a href="#2">link 2</a></span>
  <br>
  <form method="get" id="search" action="http://duckduckgo.com/">
    <input type="hidden" name="sites" value="foobar.com" />
    <input type="hidden" name="k8" value="#f00" />
    <input type="hidden" name="k9" value="#00f" />
    <input type="hidden" name="kaa" value="#808" />
    <input type="hidden" name="ks" value="m" />
    <input type="hidden" name="kt" value="a" />
    <input type="hidden" name="ka" value="a" />
    <input type="hidden" name="k1" value="-1" />
    <input type="text" name="q" id="stext-input" placeholder="Search...">
    <input id="yes" type="image" src="yes.png">
  </form>
  <br>
  <div class="strap-line">strap line strap line strap line strap line strap line </div>
</div>
<!--close col4-->