Hacer que un div aparezca debajo de otro al colocar el móvil horizontal

[Hildergarn]

Estoy construyendo este landing page en donde muestro dos portadas de ebooks (con sus precios y botones de pago) en los siguientes divs centrados:



Lo que deseo es que al momento de colocar el celular o tablet de forma vertical, los divs salgan de forma apilada (tal como se ve en esta imagen que edité para explicarme mejor):



He intentado por mis medios, pero sin éxito alguno ya que los divs salen uno al lado del otro al poner mis dispositivos móviles de forma vertical. Si sirve de algo, les dejo el código html y css que tengo actualmente para dicha sección:

HTML

Código:

<div id="containerebook1">
         <div id="colebook1">
<a href="https://gum.co/TagMj?wanted=true"><img class="aligncenter size-full wp-image-6882" src="http://www.panamaviejaescuela.com/wp-content/uploads/2017/09/dias-historicos-panama-portada-v1.jpg" alt="historia de panama" width="200" /></a>
<p>$8</strong></p>
<div class="aligncenter">[maxbutton id="2"]</div>
         </div>
         <div id="colebook2">
<a href="https://gum.co/aLtbI?wanted=true"><img class="aligncenter size-full wp-image-6882" src="http://www.panamaviejaescuela.com/wp-content/uploads/2017/04/cover-dias-historicos-panama.jpg" alt="historia de panama" width="200" /></a>
<p>$25</p>
<div class="aligncenter">[maxbutton id="1"]</div>
         </div>
</div>

CSS

Código:

#containerebook1 {
	float:left;
	width:100%;
	position:relative;
	right:50%;
}
#colebook1 {
	float: left;
    width: 46%;
    position: relative;
    background-color: #f3f3f3;
    left: 52%;
    border: 1px dashed #ccc;
    overflow: hidden;
}

#colebook2 {
    float: left;
    width: 46%;
    background-color: #f3f3f3;
    border: 1px dashed #ccc;
    position: relative;
    left: 56%;
    overflow: hidden;
}

#containerebook1 p {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 2.9em;
    text-align: center;
}

Mil gracias de antemano por la ayuda.