在移动视图中将产品类别排在最前面

Question

我的Woocommerce商店有一个小问题。

当从智能手机（小）屏幕宽度检查时，当前进入my shop，其显示 产品类别 小部件，但我想将其置于顶部。

这是我从该元素获得的CSS：

library(tidyverse)

# Define a function 
subset_fun <- function(dat, k1, k2, col){
  dat2 <- dat %>%
    filter(k <= k1, k > k2) %>%
    pull(col)
  return(dat2)
}

# Define lists for the function arguments
par <- list(dat = df_list,                   # List of data frames
            k1 = list(12, 4, 12),            # The first number 
            k2 = list(0, 0, 0),              # The second number
            col = list("h_1", "h_3", "h_2")) # The column name

# Apply the subset_fun
df_list2 <- pmap(par, subset_fun)
df_list2
# $df1
# [1] -0.6868529 -0.4456620  1.2240818  0.3598138  0.4007715  0.1106827 -0.5558411  1.7869131
# [9]  0.4978505 -1.9666172  0.7013559 -0.4727914
# 
# $df2
# [1] -0.9474746 -0.4905574 -0.2560922  1.8438620
# 
# $df3
# [1] -0.2803953  0.5629895 -0.3724388  0.9769734 -0.3745809  1.0527115 -1.0491770 -1.2601552
# [9]  3.2410399 -0.4168576  0.2982276  0.6365697

有人可以帮助我如何将小工具定位到商店页面的顶部吗？

Answer 1

产品类别小部件正在关闭，因为在html中它的顺序低于内容div。

目前div结构就像这样

<div class="content_wrap">
  <div class="content">
  </div>
  <div class="sidebar widget_area scheme_original">
  </div>
</div>

Change this to this foramte

<div class="content_wrap">
  <div class="sidebar widget_area scheme_original">
  </div>
  <div class="content">
  </div>
</div>

Answer 2

这是因为您的标记结构会将您的小部件sidebar推送到下方。与标记一样，您将content作为第一个子项，sidebar窗口小部件作为第二个（下一个）子项。

有两种可能的解决方案：

特定移动屏幕的

1。 CSS 属性。的 [Prefreable]

2. 重新排列HTML标记。

CSS解决方案

您可以使用针对小屏幕尺寸的显示屏固件属性，如下所示：

@media only screen and (max-width: 960px) {
  .content_wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  }
  .sidebar_left .sidebar.widget_area {
    -ms-flex-order: 1;
    order:1;
    margin-bottom: 3em;
  }
  .sidebar_left .content {
    -ms-flex-order: 2;
    order:2;
  }
}

  

您可以在CSS代码上方放置CSS代码。 878，responsive.css文件。在媒体查询屏幕宽度低于767px之前就开始了。

HTML解决方案

您可以在.sidebar内交换包含课程.content和content_wrap的元素。

希望答案可以帮助你。