The tab order of the Encyclopedia template is wrong

The boxes on the right are shown "after" the content. In order to position them, we could use a flex layout with right to left. Having the info summary after the full info itself is useless for Assistive Techs users.

In addition, there is a layout responsiveness issue with low width screens. A flex layout with the appropriate parameters would fix that.
When zooming a bit in, the content of the summary box overflows the box itself and a scollbar appears. We want to avoid this situation as much as possible.