javascript - 同级 div 的替代背景色

Question

我正在创建的这个系统遇到了问题。我总共有四个兄弟 div 容器。它们在普通桌面 View 中是这样的:

蓝红蓝红

这适用于 2/3 视口(viewport)以将 background-color 显示为替代颜色。它在普通桌面模式和 640px 及以下屏幕下工作，但对于我的中间视口(viewport) 640-840px，屏幕显示如下颜色:

蓝红

蓝红

这会让阅读变得非常困难。基本上我需要 div 的颜色以这样的模式变化:

蓝红

红蓝

有什么办法可以实现吗？

body {
	margin: 0;
}
.box-container {
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
}
.blue-box, .red-box {
	height: 50%;
	width: 25%;
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	transition: all .5s ease-in-out;
}
.blue-box {
	background-color: blue;
}
.red-box {
	background-color: red;
}
.blue-box:hover, .red-box:hover {
	background-color: purple;
	cursor: pointer;
}
.blue-box:hover .box-description, .red-box:hover .box-description {
	display: none;
}
.blue-box:hover .box-description-hover, .red-box:hover .box-description-hover {
	display: block;
	color: #FFF;
	font-size: 1.5em;
	padding-top: 20px;
}
.insideBoxWrap {
	padding: 50px 18%;
}
.box-title {
	color: #FFF;
	font-size: 2.6em;
}
.box-description {
	padding-top: 15px;
	color: green;
	font-size: 1.5em;
}
.box-description-hover {
	display: none;
}
/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------*/

@media screen and (max-width:640px) {
	.box-container {
		width: 100%;
		height: 50%;
	}
	.blue-box, .red-box {
		height: 50%;
		width: 100%;
		display: block;
	}
	.blue-box:hover, .red-box:hover {
		height: 100%;
	}
	.blue-box:hover .box-description-hover, .red-box:hover .box-description-hover {
		display: block;
		color: #FFF;
		font-size: 1.1em;
		padding-top: 20px;
	}
	.insideBoxWrap {
		padding: 30px 30px;
	}
	.box-title {
		font-size: 1.6em;
	}
	.box-description {
		padding-top: 5px;
		color: green;
		font-size: 1.1em;
	}
}	
/*----------------------------------------------PHONE MEDIA QUERY 641 - 840--------------------------*/

@media screen and (min-width: 640px) and (max-width:840px) {
	.box-container {
		width: 100%;
		height: 100%;
	}
	.blue-box, .red-box {
		height: 33%;
		width: 50%;
		display: inline-block;
	}
}

<div class="box-container">
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div><div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div><div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div><div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
</div>

Answer 1

添加这个:

CodePen

.blue-box:nth-child(3){
    background-color:red;
 }
.red-box:nth-child(4){
   background-color:blue;
}

到 @media 屏幕和(最小宽度:640px)和(最大宽度:840px)