Make some controls visible when screen layout breakpoint is reached - UI5 - sapui5

Question

I have 2 images and 5 buttons in between those 2 images in header of UI5 application. On using Overflowtoolbar, the overflow (...) is shown at the extreme right, how can I make it appear in between exactly considering I will adjust the overflow priority as "Never overflow" for both the images and they will never overflow.
Another way: Is it possible to introduce an action sheet/ breadcrumb menu in the header and make it visible only if certain screen breakpoint is reached and at that time make all the other buttons disappear. In a way - to make certain controls visible/hide based on breakpoint level.
Goal is to have both the images visible till the point its possible and rest everythig in ... preferably in between those images. Else I am not seeing those ..., only 2 images are shown in small screen.
XML.view
<OverflowToolbar design="Transparent">
<Image src="images/abc.png" height="3.5rem">
<layoutData>
<OverflowToolbarLayoutData priority="High"/>
</layoutData>
</Image>
<Button id="1">
<layoutData>
<OverflowToolbarLayoutData priority="Low"/>
</layoutData>
</Button>
<Button id="2">
<layoutData>
<OverflowToolbarLayoutData priority="Low"/>
</layoutData>
</Button>
<Button id="3">
<layoutData>
<OverflowToolbarLayoutData priority="Low"/>
</layoutData>
</Button>
<Button id="4">
<layoutData>
<OverflowToolbarLayoutData priority="Low"/>
</layoutData>
</Button>
<Button id="5">
<layoutData>
<OverflowToolbarLayoutData priority="Low"/>
</layoutData>
</Button>
<ToolbarSpacer></ToolbarSpacer>
<Image src="images/logo.png" height="2rem">
<OverflowToolbarLayoutData priority="NeverOverflow"/>
</layoutData>
</Image>
<ToolbarSeparator></ToolbarSeparator>
<core:Icon id="loginInfo" src="sap-icon://customer" size="2rem"/>
</OverflowToolbar>

Answer 1

Here is an example of two images with an action sheet / breadcrumb menu in between:
<OverflowToolbar asyncMode="true">
<Image src="..." />
<Breadcrumbs currentLocationText="Laptop">
<layoutData>
<ToolbarLayoutData shrinkable="true" /><!-- if UI5 version < 1.103. -->
<!-- Note: sap.m.Breadcrumbs is shrinkable by default since UI5 1.103. -->
</layoutData>
<links>
<!-- ... -->
</links>
</Breadcrumbs>
<Image src="..." />
</OverflowToolbar>
From https://jsbin.com/humuxew/edit?js,output
In order to make breadcrumbs shrinkable in the toolbar, <ToolbarLayoutData shrinkable="true"/> needs to be added to the layoutData aggregation.*
* Update: unless the SAPUI5/OpenUI5 version ≥ 1.103 (See commit: 512d3dd).

Answer 2

You won't be able to solve your task with an OverflowToolbar since the ... are always rendered as last element (see Renderer: Line 23).
You could use the Event API for screen width changes, modify a view model in the event handler and bind the visible property to that view model as described in Device Adaptation.