Move Minicart responsive

Question

we are using Magento 2.2.6 an rebuilding the desing. We plan to move the minicart when the width is small (on smartphones). But we cant do this with css. When we initialize the minicart twice in phtml and working with css

($this->getChildHtml("minicart"); in phtml with visible-xs div around

...

($this->getChildHtml("minicart"); in phtml with hidden-xs div around

the minicart is not functional (while no errors in console).

Can we "copy" the minicart in the xml (default.xml) and work with minicart and minicart2 in the phtml?

$this->getChildHtml("minicart");
$this->getChildHtml("minicart2");

Answer 1

You can use jQuery to move minicart for small device (window width less than 768px ).

<script type="text/javascript">
    require(['jquery'], function($) {
        $(document).ready(function(){
            if ($(window).width() < 768) {
                $($('div[data-block="minicart"]').detach()).appendTo('.header.content');
            }
        });
    });
</script>