widget order for mobile screens

Hmm, not easily.

One way I can think of is to install a plugin that lets you add classes to your widgets.

Then add "desktop" and "mobile" classes to the widgets.

Then add some CSS so "mobile" widgets are hidden, and "desktop" widgets are shown.

Then some CSS with a media query to switch that so mobile widgets are shown and desktop widgets are hidden.

Something like this:

.desktop {display:block;}
.mobile {display: none;}

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

Then use a plugin like this to add the classes to the widgets: https://wordpress.org/plugins/widget-css-classes/