释放空间后移动页脚列（ipad视口）

Question

我正在使用Wordpress（最新版本）我使用以下CSS代码成功隐藏了页脚中的中间列（总共有三个）：

@media (width: 768px) and (height: 1024px) { .footer-widget:nth-child(2) { display: none; } }

然而，这并没有将第三列移动到第二列（这是我想要实现的目标）。

请参阅下图以供参考：

任何帮助将不胜感激，我使用Divi主题和最新版本的Wordpress。我可以将任何代码保存到自定义CSS或JS区域。

Answer 1

将其运行到平板电脑尺寸屏幕。

@media screen and (max-width: 991px) and (min-width: 768px) {
  .main-footer {
    width: 100%;
  }
  .footer-widget:nth-child(2) {
    display: none;
  }
  .footer-widget {
    float: left;
    width: 50%
  }
}

<div class="main-footer">
  <div class="footer-widget">
    <h3>
    GET IN TOUCH
    </h3>
    <button>
      Live Chat
    </button>
  </div>
  <div class="footer-widget">
    <h3>
    yoour display none content
    </h3>
  </div>
  <div class="footer-widget">
    <h3>
    USEFUL RESOURCES
    </h3>
    <button>
      About Us
    </button>
  </div>
</div>