Стилизация «виджетов» должна быть встроенной и расположенной друг под другом с меньшими экранами

Question

У меня есть виджеты на главном экране моего сайта.То, что я пытаюсь сделать, это разместить их рядом друг с другом (по вертикали) на больших экранах и упасть друг под друга (по горизонтали) на экранах меньшего размера.

Как мне этого добиться?Это то, что я до сих пор:

.panel-wrap {
  max-width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  position: relative;
}

#main-content {
  overflow: hidden;
  margin: 0;
  padding: 20px;
  min-height: 580px;
  vertical-align: top;
}


/*#main-content .widget {           
            display:inline-block;
        }*/

#main-content #news h4 {
  font-size: 1.2em;
  line-height: 1.4em;
}

#main-content #news h4 span {
  display: block;
  float: left;
  width: 100px;
  color: #000;
  padding-right: 10px;
}


/* WIDGETS */

.widget {
  margin: 0 0 20px;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
}

.widget div {
  padding: 5px;
  min-height: 50px;
}

.widget h3 {
  font-size: 12px;
  padding: 8px 10px;
  text-transform: uppercase;
  border-bottom: 1px solid #e7e7e7;
}

.widget h3 span {
  float: right;
}

.widget h3 span:hover {
  cursor: pointer;
  background-color: #e7e7e7;
  border-radius: 20px;
}


/*.blog-info {
        margin: 0 0 10px;
        font-size: .9em;
        color: #787878;
    }

    #sidebar #blogs .blog-info {
        display:inline-flex;
    }*/

<div class="panel-wrap">
  <div id="main-content">
    <div id="news" class="widget">
      <h3>News</h3>
      <div>
        <h4><span>Jan 22, 2019</span>Blah blah blah blah blah blah blah blah blah</h4>
      </div>
    </div>
    <div id="blogs" class="widget">
      <h3>Blogs</h3>
      <div>
        <h4>Blah blah blah blah blah blah blah blah blah</h4>
        <p class="blog-info">Friday, February 14, 2019 by Data Access Team</p>
        <p>Blah blah blah blah blah blah blah blah blah blah blah</p>
      </div>
    </div>
  </div>
</div>

Вот как это выглядит в настоящее время:

Answer 1

Добавьте display: flex к вашему main-content, чтобы держать их рядом в режиме рабочего стола. Используйте медиа-запрос для переключения flex-direction на column в мобильном представлении.

Теперь добавьте margin-right к первому виджету (news), чтобы обернуть его - см. Демонстрацию ниже со встроенными пояснениями:

.panel-wrap {
  max-width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  position: relative;
}

#main-content {
  overflow: hidden;
  margin: 0;
  padding: 20px;
  min-height: 580px;
  vertical-align: top;
  display: flex; /* keeps them horizontal in normal view */
}

#news { /* margin to separate the widgets */
  margin-right: 20px;
}

@media screen and (max-width: 768px) { /* mobile view */
  #main-content {
    flex-direction: column; /* switch to vertical */
  }
  
   #news{ /* in mobile view we don't need the right margin */
     margin-right: 0;
   }
}

#main-content #news h4 {
  font-size: 1.2em;
  line-height: 1.4em;
}

#main-content #news h4 span {
  display: block;
  float: left;
  width: 100px;
  color: #000;
  padding-right: 10px;
}


/* WIDGETS */

.widget {
  margin: 0 0 20px;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
}

.widget div {
  padding: 5px;
  min-height: 50px;
}

.widget h3 {
  font-size: 12px;
  padding: 8px 10px;
  text-transform: uppercase;
  border-bottom: 1px solid #e7e7e7;
}

.widget h3 span {
  float: right;
}

.widget h3 span:hover {
  cursor: pointer;
  background-color: #e7e7e7;
  border-radius: 20px;
}

<div class="panel-wrap">
  <div id="main-content">
    <div id="news" class="widget">
      <h3>News</h3>
      <div>
        <h4><span>Jan 22, 2019</span>Blah blah blah blah blah blah blah blah blah</h4>
      </div>
    </div>
    <div id="blogs" class="widget">
      <h3>Blogs</h3>
      <div>
        <h4>Blah blah blah blah blah blah blah blah blah</h4>
        <p class="blog-info">Friday, February 14, 2019 by Data Access Team</p>
        <p>Blah blah blah blah blah blah blah blah blah blah blah</p>
      </div>
    </div>
  </div>
</div>