真的这不是一个大问题。这个块是真的独立和移动它是我们通常在Magento 2是可能的。
步骤1
对于布局catalog_category_view. xml，请执行以下操作

<move element="catalog.navigation.state" as="navigation_state" destination="product_list_toolbar" before="category.description"/>

字符串
Step 2.对于模板Magento_LayeredNavigation：：layer/view.phtml
寻找这样的代码

<?= $block->getChildHtml('state') ?>
        <?php if ($block->getLayer()->getState()->getFilters()): ?>
            <div class="block-actions filter-actions">
                <a id="product-filter-clear"
                   data-pr-filter="clearAll"
                   href="<?= $block->escapeUrl($block->getClearUrl()) ?>"
                   class="action clear filter-clear">
                    <span><?= $block->escapeHtml(__('Clear All')) ?></span>
                </a>
            </div>
        <?php endif; ?>

型
因为父块试图使用子块的功能。

• 是否可以只使用css将secondDivInside移动到firstDiv？*

不.我不相信有一种方法（深奥与否）可以用CSS操纵/移动DOM的实际结构。
最低级的，尽管不优雅，将是复制div并使用display：none/block显示/隐藏它。
然而，这似乎是一个基本的结构问题。为什么你的元素以这样一种方式排序，移动重新排序必须完全检修？
这是一篇文章，讨论了移动的结构的优点/缺点，因为你设计你的网页.这是一个快速阅读，可以帮助你更好地概念化如何设计移动的<->桌面。https://codemyviews.com/blog/mobilefirst

你可以做的是：

<div class="firstDiv">
     <div class="firstDivInside">...</div>
     <div class="secondDivInsideMobile">...</div>
</div>
<div class="secondDiv">
   <div class="secondDivInside">...</div>
</div>

字符串
CSS

.secondDivInsideMobile {
   display:none;
}
@media only screen and (max-width: 500px) {
    .secondDivInsideMobile  {
        display:auto;
    }
     .secondDivInside {
        display:none;
     }
}

型

你不能用CSS操作DOM，但是你可以使用flexbox来获得一个看起来像你想要的标记的布局。
检查和玩这个页面：）
http://the-echoplex.net/flexyboxes/

你不能使用css操作DOM，但这可能是一个解决方案：

.firstDiv {
  height: 100px;
  background-color: yellow;
}
.secondDiv {
  height: 100px;
  background-color: green;
  margin-top: 100px;
}
@media (max-width: 768px){
  .secondDiv {
    background: none !important;
    height: unset !important;
    margin-top: unset !important;
  }
}

个字符
这个解决方案很简单：https://jsfiddle.net/y35wkpgt/

基本上你不能使用CSS移动div，但是你可以根据viewport显示和隐藏div。这里有一个例子，我希望它能帮助你。

超文本标记语言

<div class="firstDiv">
     <div class="firstDivInside">...</div>
     <div class="secondDivInside">...</div>
</div>
<div class="secondDiv">
   <div class="secondDivInside">...</div>
</div>

字符串

CSS

.secondDivInside {
   display: none;
}
.secondDiv .secondDivInside {
  display: block;
}
@media screen and (max-width: 767px) {
    .secondDivInside {
       display: block;
    }
    .secondDiv {
      display: none;
    }
}

型

你可以简单地用flexbox..用ORDER来实现这一点

.firstDiv {
display: flex;
}
.firstDivInside {
    order: 1
}
.secondDivInside {
    order: 0
}

字符串

1.对于@media下的元素集合display到none.
1.加载元素后运行JS脚本.
1.在脚本内部，使用getComputedStyle()检查元素的display
1.如果是none，则将元素移动到新位置，并使用insertBefore()。
1.将display设置为block或其他元素。
如果一个人把JS关掉，他什么也看不见，他什么也看不见。

if(document.querySelector('.elmToMove')){
    
    if(window.getComputedStyle(document.querySelector('.elmToMove'), null).getPropertyValue("display")=='none'){
        
        if(document.querySelector('.newParent')){ //or any other way to get it
            document.querySelector('.newParent').insertBefore(document.querySelector('.elmToMove'), document.querySelector('.newParent').lastChild.nextSibling);
            
            document.querySelector('.elmToMove').style.setProperty('display','block','important');
        };
    } else{
        document.querySelector('.elmToMove').style.removeProperty('display');
    };
};

字符串