Personalización de CSS para dispositivos móviles

eic2010 dijo:

hola amigos estoy buscando por todos lados y no encuentro la forma de lograr lo siguiente

asi tengo el css en movil

Ver el archivo adjunto 122157

asi quisiera hacer el listado

Ver el archivo adjunto 122158

este es mi codigo css

HTML:

* {
  box-sizing: border-box;

}

body {
    font-family: Helvetica;
    background-color: #ffffff;
    max-width:960px;
    margin:0px auto 0px auto;
    margin-top:40px;
}
.my-logo,
footer {
  width: 100%;
    max-width:auto;
    position:absolute;
    left:0px;   
  padding-left: 1%;
  margin-bottom: 0px;
  background-color: #000;
  border: 1px solid #000;
}
body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
article > header {

}
footer {
  margin-top: 4px;
}

a {
  text-decoration: none;
    color:#444444;

}

/* 'Margin: 0 auto' centers block content on the page */
.wrap {
  width: 100%;
  margin: 0 auto;
   
}

.content-area {
  display: inline-block;
   
}

.content-thin {
    width: 70%;
}

.content-full-width {
    width: 100%;
}

.content-area,
.primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  vertical-align: top;
  background-color: #DF0101;
   
   
}

.article-loop {
    width: 31%;
    text-align: left;
    margin: 5px;
    margin-top:20px;
    padding: 10px;
   
   
}


.article-full {
  width: 99%;
  padding: 1%;
   
}

.article-loop,
.article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #fff;
  border-radius: 0px;
  margin-bottom: 10px;
  padding:0px;
   
}

.post-thumb {
    width: 100%;
    height:100%;
    max-height: 320px;
    overflow: hidden;
   
}
.post-thumb img {
    width:100%;
    height:100%;
   
}
.post-categories{
    margin-left:2px;
    margin-bottom:0px;
    margin-top:3px;
     list-style: none;
     padding:0;
   
}
.post-categories a{
    color : #80ABC9;
}
h2{
 margin-left:2px;
    margin-bottom:0px;
    margin-top:3px;
     list-style: none;
     padding:0px;
    font-size:23px;
    font-family: Helvetica;
    font-weight: 400;   
   
}
span{
 color:#0984DA;
    font-weight:600;
}
 [MENTION=16931]medi[/MENTION]a screen and (max-width: 760px) {
.post-thumb img {
    width:100%;
    height:100%;
    max-height:160px;
}
   
   
    .post-thumb3 img {
    display: inline;
    width:100%;
    height:100%;
    max-width:100%;
        min-height:200px;
   
}
   
    h2{
    font-size:21px;
    font-weight: 450;   
}   
    .article-loop {
    width: 99%;
   min-width: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
        margin-top:0px;
       margin-bottom: 0px;
      padding:10px;
       
  }
}
    article:nth-child(-n+19) {
    width:100%;
}   
article:nth-child(-n+19) a{
     font-weight: 450;   
   
}
article:nth-child(-n+19) span{
    font-weight: 450;
     
}
article:nth-child(-n+19) h2{
    font-size:20px;
      padding:5px;
    padding-top:5px;
    margin-bottom:8px;
   
}

Hacer clic para expandir...

css
   .content-area {
       display: flex;
       flex-direction: column; /* Cambiar a fila para pantallas más grandes */
   }