{"id":17689530,"date":"2024-04-16T07:23:19","date_gmt":"2024-04-16T07:23:19","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/switch-places-with-other-dropdown-menu-2\/"},"modified":"2024-04-16T07:23:19","modified_gmt":"2024-04-16T07:23:19","slug":"switch-places-with-other-dropdown-menu-2","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/switch-places-with-other-dropdown-menu-2\/","title":{"rendered":"switch places with other dropdown menu"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hi everone<br \/><br \/>I have a \u2018products per page\u2019 dropdown menu sitting at the top right of my product archives (shop) page. Next to it, on the left, I also have a \u2018sort by\u2019 dropdown menu (CSS: float: right).<br \/>I would like these two menus to switch places. I have no idea how to achieve this with coding.<br \/>I am guessing I need to group these two elements together by using the &lt;div&gt; tag but I am still new to CSS. Could you please advise?<br \/><br \/>These two forms below should be switched in order.<br \/><br \/>&lt;form method=&#8221;post&#8221; action=&#8221;&#8221; style=&#8221;float: right; margin-left: 5px;&#8221; class=&#8221;form-wppp-select products-per-page&#8221;&gt;&lt;select name=&#8221;ppp&#8221; onchange=&#8221;this.form.submit()&#8221; class=&#8221;select wppp-select&#8221;&gt;&lt;option value=&#8221;16&#8243; selected=&#8221;&#8221;&gt;16 products per page&lt;\/option&gt;<br \/>&lt;option value=&#8221;32&#8243;&gt;32 products per page&lt;\/option&gt;<br \/>&lt;option value=&#8221;48&#8243;&gt;48 products per page&lt;\/option&gt;&lt;\/select&gt;&lt;\/form&gt;<br \/><br \/>&lt;form class=&#8221;woocommerce-ordering&#8221; method=&#8221;get&#8221;&gt;<br \/>\t&lt;select name=&#8221;orderby&#8221; class=&#8221;orderby&#8221; aria-label=&#8221;Shop order&#8221;&gt;<br \/>\t\t\t\t\t&lt;option value=&#8221;popularity&#8221;&gt;Sort by popularity&lt;\/option&gt;<br \/>\t\t\t\t\t&lt;option value=&#8221;date&#8221; selected=&#8221;&#8221;&gt;Sort by most recent&lt;\/option&gt;<br \/>\t\t\t\t\t&lt;option value=&#8221;price&#8221;&gt;Sort by price: low to high&lt;\/option&gt;<br \/>\t\t\t\t\t&lt;option value=&#8221;price-desc&#8221;&gt;Sort by price: high to low&lt;\/option&gt;<br \/>\t\t\t\t\t&lt;option value=&#8221;alphabetical&#8221;&gt;Sort by name: A to Z&lt;\/option&gt;<br \/>\t\t\t\t\t&lt;option value=&#8221;reverse_alpha&#8221;&gt;Sort by name: Z to A&lt;\/option&gt;<br \/>\t\t\t&lt;\/select&gt;<br \/>\t&lt;input type=&#8221;hidden&#8221; name=&#8221;paged&#8221; value=&#8221;1&#8243;&gt;<br \/>\t&lt;\/form&gt;<\/p>\n","protected":false},"template":"","class_list":["post-17689530","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/17689530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/17689530\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=17689530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}