Resize header as a column & move to left side of content

Hello all.

This may be a stupid idea, it may not be possible, but this is what I want to do:

I’m creating a website (here) and I’m using a large, bold, almost square (263 x 300 px) header image that I want to keep in the top-left corner, as it is right now. However, this wastes a ton of real estate at the top. I would rather have the header image appear to the left side of — and flush with the top of — the main content of the website. So, I want to resize the header as a vertical column and position it to the left of all other content (including the navigational menu, page content, sidebar, and footer).

Here is a diagram representing what I want to do, in case the above explanation is confusing.

Does anyone know if this is even feasible, and if so, can it be achieved solely through my child theme’s CSS stylesheet, or does it require tweaking the PHP files, too?

I considered just removing the header altogether and using a left-hand sidebar to accomplish this, but I see a couple problems with that method: (1) I still want the header to act as a header, showing the header image at the top when Hueman’s responsive layout reformats the website for devices with small screens; and (2) On devices with small screens (or just narrower browser windows), the sidebars are hidden, so if I put the “header” image in a sidebar, it would not even be visible unless the viewer clicked on the “expand sidebar” arrow.

Another thought I had is to float the image outside the main wrapper of the website, but I don’t know how to achieve that, or what the result would look like on devices with small screens.

I welcome any suggestions. Thank you in advance.